From 1078dc10ec34ecce80894a914982a252093a4911 Mon Sep 17 00:00:00 2001 From: Ricardo Cabral Date: Mon, 21 Oct 2024 16:36:43 -0400 Subject: [PATCH 01/66] feat: OPTIC-1217: Implement Color design tokens as CSS variables and Dark Mode From 48f4af871afedb57a28e24f74afc916228178189 Mon Sep 17 00:00:00 2001 From: Ricardo Cabral Date: Mon, 21 Oct 2024 16:36:55 -0400 Subject: [PATCH 02/66] feat: OPTIC-1217: Implement Color design tokens as CSS variables and Dark Mode --- label_studio/core/static/css/main.css | 2 +- label_studio/core/static/css/users.css | 14 +- label_studio/core/static/icons/logo-black.svg | 32 +- label_studio/core/static/icons/logo.svg | 22 +- .../labelstudio/src/assets/images/index.js | 1 + .../labelstudio/src/assets/images/logo.svg | 17 + .../components/Breadcrumbs/Breadcrumbs.scss | 12 +- .../src/components/Button/Button.scss | 18 +- .../src/components/Columns/Columns.scss | 1 + .../components/Description/Description.scss | 4 +- .../src/components/Dropdown/Dropdown.scss | 5 +- .../src/components/EmptyState/EmptyState.scss | 14 +- .../src/components/Error/Error.scss | 6 +- .../components/Form/Elements/Input/Input.scss | 16 +- .../components/Form/Elements/Label/Label.scss | 3 +- .../labelstudio/src/components/Form/Form.scss | 9 +- .../src/components/Hamburger/Hamburger.scss | 4 +- .../src/components/HeidiTips/HeidiTip.scss | 14 +- .../labelstudio/src/components/Menu/Menu.scss | 39 +- .../src/components/Menubar/MenuContent.scss | 5 +- .../src/components/Menubar/MenuSidebar.scss | 5 +- .../src/components/Menubar/Menubar.jsx | 3 +- .../src/components/Menubar/Menubar.scss | 19 +- .../src/components/Modal/Modal.scss | 17 +- .../components/SidebarMenu/SidebarMenu.scss | 4 +- .../src/components/Toast/MessageToast.scss | 10 +- .../src/components/Userpic/Userpic.scss | 12 +- .../pages/CreateProject/Config/Config.scss | 2 +- .../pages/CreateProject/CreateProject.scss | 2 +- .../pages/CreateProject/Import/Import.scss | 24 +- .../Organization/PeoplePage/PeopleList.scss | 18 +- .../Organization/PeoplePage/SelectedUser.scss | 17 +- .../src/pages/Projects/Projects.scss | 21 +- .../src/pages/Settings/AnnotationSettings.jsx | 2 +- .../src/pages/Settings/settings.scss | 21 +- .../src/pages/WebhookPage/WebhookPage.scss | 15 +- .../datamanager/src/components/App/App.scss | 4 +- .../src/components/Common/Button/Button.scss | 6 +- .../src/components/Common/Modal/Modal.scss | 4 +- .../components/Common/Resizer/Resizer.scss | 6 +- .../src/components/Common/Table/Table.scss | 14 +- .../Common/Table/TableHead/TableHead.scss | 5 +- .../src/components/Common/TableOld/Table.scss | 2 +- .../src/components/Common/Tabs/Tabs.scss | 25 +- .../components/DataManager/DataManager.jsx | 2 +- .../src/components/Label/Label.scss | 3 +- .../components/MainView/DataView/Table.scss | 10 +- web/libs/editor/src/common/Modal/Modal.scss | 6 +- .../editor/src/common/Tooltip/Tooltip.scss | 10 +- .../src/components/BottomBar/BottomBar.scss | 6 +- .../editor/src/components/TopBar/TopBar.scss | 12 +- .../TextAreaRegion/TextAreaRegion.scss | 17 +- web/libs/ui/src/tokens/colors.scss | 384 ++++++++++++++++++ 53 files changed, 717 insertions(+), 229 deletions(-) create mode 100644 web/apps/labelstudio/src/assets/images/logo.svg diff --git a/label_studio/core/static/css/main.css b/label_studio/core/static/css/main.css index 4457d0a6a40f..a176f97e77be 100644 --- a/label_studio/core/static/css/main.css +++ b/label_studio/core/static/css/main.css @@ -154,7 +154,7 @@ pre { } main.main { - background: #FCFCFC !important; + background: var(--color-neutral-background); padding: 2em 4rem 2rem 2rem; } diff --git a/label_studio/core/static/css/users.css b/label_studio/core/static/css/users.css index 788e1672e8cf..e3520068a769 100644 --- a/label_studio/core/static/css/users.css +++ b/label_studio/core/static/css/users.css @@ -1,8 +1,8 @@ /* Account page */ body { - --border-color: var(--sand_300); - --color-error: #d00; + --border-color: var(--color-neutral-border); + --color-error: var(--color-negative-content-bold); } .account-page { display: grid; @@ -24,7 +24,7 @@ body { .account-page header sub{ font-size: .875rem; - color: var(--sand_600); + color: var(--color-neutral-content-subtler); } .account-page form ul { margin: 0; @@ -72,7 +72,7 @@ body { } .user-activity p { margin-bottom: 10px; - color: rgba(0, 0, 0, 0.6); + color: var(--color-neutral-content-subtler); } .account-page footer { display: flex; @@ -80,7 +80,7 @@ body { align-items: center; } .account-page footer p { - color: var(--sand_600); + color: var(--color-neutral-content-subtler); margin: 0; } @@ -93,7 +93,7 @@ body { } #users table { font-size: 20px; - border: 1px solid rgba(0, 0, 0, 0.15); + border: 1px solid var(--border-color); text-align: left; } #users table thead { @@ -136,7 +136,7 @@ body { grid-template: auto / 64px auto; column-gap: 16px; line-height: 1.5; - color: rgba(0, 0, 0, 0.6); + color: var(--color-neutral-content); } .user-info__header > .email { margin-top: 0 !important; diff --git a/label_studio/core/static/icons/logo-black.svg b/label_studio/core/static/icons/logo-black.svg index 4f603b2473a4..4ffd061b0fb8 100644 --- a/label_studio/core/static/icons/logo-black.svg +++ b/label_studio/core/static/icons/logo-black.svg @@ -1,22 +1,22 @@ - - + + + + + + + + + + + + + - - - - - - - - - - - - - + + - + \ No newline at end of file diff --git a/label_studio/core/static/icons/logo.svg b/label_studio/core/static/icons/logo.svg index 4f603b2473a4..91ee34cdf280 100644 --- a/label_studio/core/static/icons/logo.svg +++ b/label_studio/core/static/icons/logo.svg @@ -3,17 +3,17 @@ - - - - - - - - - - - + + + + + + + + + + + diff --git a/web/apps/labelstudio/src/assets/images/index.js b/web/apps/labelstudio/src/assets/images/index.js index bbdeda3fdabb..68a071e836b2 100644 --- a/web/apps/labelstudio/src/assets/images/index.js +++ b/web/apps/labelstudio/src/assets/images/index.js @@ -1,2 +1,3 @@ export { ReactComponent as HeidiSpeaking } from "./heidi-speaking.svg"; export { ReactComponent as HeidiAi } from "./heidi-ai.svg"; +export { ReactComponent as LSLogo } from "./logo.svg"; diff --git a/web/apps/labelstudio/src/assets/images/logo.svg b/web/apps/labelstudio/src/assets/images/logo.svg new file mode 100644 index 000000000000..636352b00b34 --- /dev/null +++ b/web/apps/labelstudio/src/assets/images/logo.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/web/apps/labelstudio/src/components/Breadcrumbs/Breadcrumbs.scss b/web/apps/labelstudio/src/components/Breadcrumbs/Breadcrumbs.scss index d1c539ed0d42..2d5bcd7ab45a 100644 --- a/web/apps/labelstudio/src/components/Breadcrumbs/Breadcrumbs.scss +++ b/web/apps/labelstudio/src/components/Breadcrumbs/Breadcrumbs.scss @@ -46,7 +46,11 @@ & > span, & > a { - color: var(--sand_600) !important; + color: var(--color-neutral-content-subtler); + + &:hover { + color: var(--color-primary-content-bold-subtle); + } } } @@ -68,10 +72,10 @@ &__item > span, &__item > a { text-decoration: none; - color: var(--sand_900); + color: var(--color-neutral-content) ; - &:hover { - color: var(--grape_500) !important; + a { + color: var(--color-primary-content-bold); } } diff --git a/web/apps/labelstudio/src/components/Button/Button.scss b/web/apps/labelstudio/src/components/Button/Button.scss index a42e59dda10a..8b22262518f8 100644 --- a/web/apps/labelstudio/src/components/Button/Button.scss +++ b/web/apps/labelstudio/src/components/Button/Button.scss @@ -1,6 +1,6 @@ .button-ls { - --button-color: var(--grape_500); - --button-background-color: var(--sand_0); + --button-color: var(--color-neutral-content); + --button-background-color: var(--color-neutral-background-bold-light); --button-background-image: none; --button-shadow: inset 0px -1px 0px rgb(0 0 0 / 10%), inset 0px 0px 0px 1px rgb(0 0 0 / 15%); --button-content-align: center; @@ -12,11 +12,11 @@ --button-min-width: 0; --icon-size: 16px; --button-padding: 0 16px; - --button-radius: 5px; + --button-radius: 4px; --button-font-size: var(--font-size-400); --button-margin-left: 0; --button-margin-right: 0; - --button-border: 1px solid var(--button-color); + --button-border: 1px solid var(--color-neutral-border); --button-gap: 6px; border: var(--button-border); @@ -48,8 +48,8 @@ gap: var(--button-gap); &:hover:not(:disabled, .button-ls_waiting, .button-ls_look_danger, .button-ls_look_primary) { - --button-color: var(--grape_700); - --button-background-color: var(--grape_0); + --button-color: var(--color-neutral-content); + --button-background-color: var(--color-neutral-background-bold); } &:active { @@ -60,7 +60,7 @@ &:focus { outline: none; - box-shadow: 0 0 0 4px var(--grape_100); + box-shadow: 0 0 0 4px var(--color-primary-focus-outline); } &_waiting, @@ -145,8 +145,8 @@ &_look { &_primary { - --button-color: var(--sand_0); - --button-background-color: var(--primary_link); + --button-color: var(--color-primary-content); + --button-background-color: var(--color-primary-background-bold); --button-border: none; &:hover:not(:disabled, .button-ls_waiting) { diff --git a/web/apps/labelstudio/src/components/Columns/Columns.scss b/web/apps/labelstudio/src/components/Columns/Columns.scss index 67ff686f1c2d..12236c730f5f 100644 --- a/web/apps/labelstudio/src/components/Columns/Columns.scss +++ b/web/apps/labelstudio/src/components/Columns/Columns.scss @@ -12,5 +12,6 @@ font-size: 1.125rem; line-height: 22px; padding: 0 1rem 0 0; + color: var(--color-neutral-content); } } \ No newline at end of file diff --git a/web/apps/labelstudio/src/components/Description/Description.scss b/web/apps/labelstudio/src/components/Description/Description.scss index 42a0d1280fb6..a4a23e949a35 100644 --- a/web/apps/labelstudio/src/components/Description/Description.scss +++ b/web/apps/labelstudio/src/components/Description/Description.scss @@ -1,9 +1,9 @@ .description { - color: var(--sand_600); + color: var(--color-neutral-content-subtler); line-height: 140%; & a { - color: var(--grape_500); + color: var(--color-primary-content-bold); text-decoration: underline; &:hover { diff --git a/web/apps/labelstudio/src/components/Dropdown/Dropdown.scss b/web/apps/labelstudio/src/components/Dropdown/Dropdown.scss index 08280617fc68..277b498e168b 100644 --- a/web/apps/labelstudio/src/components/Dropdown/Dropdown.scss +++ b/web/apps/labelstudio/src/components/Dropdown/Dropdown.scss @@ -4,9 +4,10 @@ display: none; position: absolute; box-sizing: border-box; - background-color: var(--sand_0); - box-shadow: 0 5px 20px rgb(0 0 0 / 20%); + background-color: var(--color-neutral-background); + box-shadow: 0 5px 16px rgb(0 0 0 / 8%), 0 4px 8px rgb(0 0 0 / 16%); will-change: transform, opacity; + border-radius: var(--radius-xs); &_align { &_left { diff --git a/web/apps/labelstudio/src/components/EmptyState/EmptyState.scss b/web/apps/labelstudio/src/components/EmptyState/EmptyState.scss index 018dad104d36..364322aaccec 100644 --- a/web/apps/labelstudio/src/components/EmptyState/EmptyState.scss +++ b/web/apps/labelstudio/src/components/EmptyState/EmptyState.scss @@ -1,7 +1,7 @@ .empty-state-default { max-width: 40rem; - background: var(--grape_0); - border: 1px solid var(--grape_500); + background: var(--color-primary-background); + border: 1px solid var(--color-primary-border); padding: 2rem; border-radius: 0.5rem; display: flex; @@ -11,13 +11,13 @@ &__icon { margin-bottom: 0.75rem; - background: var(--grape_100); + background: var(--color-primary-background); padding: 0.5rem; display: flex; border-radius: 2rem; & svg path { - fill: var(--grape_500); + fill: var(--color-primary-content-bold); } } @@ -28,13 +28,13 @@ &__title { font-size: 1.75rem; font-weight: 500; - color: var(--sand_900); + color: var(--color-primary-content-bold); margin-bottom: 1rem; } &__description { font-size: 1rem; - color: var(--sand_900); + color: var(--color-primary-content-bold-subtle); margin-bottom: 1rem; text-align: center; line-height: 1.5em; @@ -42,7 +42,7 @@ &__footer { font-size: 0.75rem; - color: var(--sand_900); + color: var(--color-neutral-content); text-align: center; line-height: 1.5em; } diff --git a/web/apps/labelstudio/src/components/Error/Error.scss b/web/apps/labelstudio/src/components/Error/Error.scss index 26442f680f2b..50bf36a95778 100644 --- a/web/apps/labelstudio/src/components/Error/Error.scss +++ b/web/apps/labelstudio/src/components/Error/Error.scss @@ -3,7 +3,7 @@ padding: 16px; border-radius: 5px; box-sizing: border-box; - background-color: var(--sand_0); + background-color: var(--color-neutral-background); } .error-message { @@ -24,7 +24,7 @@ &__detail { font-size: 24px; font-weight: bold; - color: var(--danger_color); + color: var(--color-negative-content-bold); margin: 16px 0; white-space: pre-line; word-break: break-word; @@ -62,7 +62,7 @@ &__message { margin: 5px 0; - color: var(--sand_900); + color: var(--color-neutral-content-subtle); padding: 0; white-space: pre-line; word-break: break-word; diff --git a/web/apps/labelstudio/src/components/Form/Elements/Input/Input.scss b/web/apps/labelstudio/src/components/Form/Elements/Input/Input.scss index 42b92837da95..ae5d808447aa 100644 --- a/web/apps/labelstudio/src/components/Form/Elements/Input/Input.scss +++ b/web/apps/labelstudio/src/components/Form/Elements/Input/Input.scss @@ -3,15 +3,25 @@ .textarea-ls { height: 40px; min-height: 40px; - background: var(--sand_0); + background: var(--color-neutral-background-bold); font-size: 16px; line-height: 22px; - border: 1px solid var(--sand_300); + border: 1px solid var(--color-neutral-border); box-sizing: border-box; border-radius: 5px; padding: 0 16px; - transition: box-shadow 80ms ease; + transition: box-shadow 150ms ease-out; font-weight: 400; + color: var(--color-neutral-content); + + &::placeholder { + color: var(--color-neutral-content-subtle); + } + + + &:active { + border-color: var(--color-neutral-border-dark); + } &_ghost { border: none; diff --git a/web/apps/labelstudio/src/components/Form/Elements/Label/Label.scss b/web/apps/labelstudio/src/components/Form/Elements/Label/Label.scss index ce6e981045ba..de572ae2994e 100644 --- a/web/apps/labelstudio/src/components/Form/Elements/Label/Label.scss +++ b/web/apps/labelstudio/src/components/Form/Elements/Label/Label.scss @@ -1,5 +1,6 @@ .label-ls { margin-bottom: 0; + color: var(--color-neutral-content); &__text { height: 22px; @@ -11,7 +12,7 @@ &__description { font-size: 0.875rem; - color: var(--sand_600); + color: var(--color-neutral-content-subtler); font-weight: 400; line-height: 140%; diff --git a/web/apps/labelstudio/src/components/Form/Form.scss b/web/apps/labelstudio/src/components/Form/Form.scss index cfeb0ab78c15..2b4e10a9d855 100644 --- a/web/apps/labelstudio/src/components/Form/Form.scss +++ b/web/apps/labelstudio/src/components/Form/Form.scss @@ -58,11 +58,14 @@ .textarea-ls, .counter, .select-ls__list { + transition: all 100ms ease-out; + outline: 0; + &:not(&_ghost):focus, &_focused { - outline: none; - box-shadow: 0 0 0 6px var(--grape_100), inset 0 -1px 0 rgb(0 0 0 / 10%), inset 0 0 0 1px rgb(0 0 0 / 15%), inset 0 0 0 1px var(--grape_100); - border-color: var(--grape_100); + outline: 4px solid var(--color-primary-focus-outline); + // box-shadow: 0 0 0 6px var(--grape_100), inset 0 -1px 0 rgb(0 0 0 / 10%), inset 0 0 0 1px rgb(0 0 0 / 15%), inset 0 0 0 1px var(--grape_100); + border-color: var(--color-neutral-border-dark); } } diff --git a/web/apps/labelstudio/src/components/Hamburger/Hamburger.scss b/web/apps/labelstudio/src/components/Hamburger/Hamburger.scss index 7fc94c7fd930..d29c1b9bcc56 100644 --- a/web/apps/labelstudio/src/components/Hamburger/Hamburger.scss +++ b/web/apps/labelstudio/src/components/Hamburger/Hamburger.scss @@ -10,7 +10,7 @@ width: 100%; display: block; position: absolute; - background-color: var(--sand_900); + background-color: var(--color-neutral-content); &:nth-child(1) { top: 0; @@ -32,7 +32,7 @@ &:hover span, &_opened span { - background-color: var(--sand_900); + background-color: var(--color-neutral-content); } &_opened span { diff --git a/web/apps/labelstudio/src/components/HeidiTips/HeidiTip.scss b/web/apps/labelstudio/src/components/HeidiTips/HeidiTip.scss index b8281e92d883..8c96b494a04b 100644 --- a/web/apps/labelstudio/src/components/HeidiTips/HeidiTip.scss +++ b/web/apps/labelstudio/src/components/HeidiTips/HeidiTip.scss @@ -1,12 +1,12 @@ .heidy-tip { &__content { padding: 1rem; - border: 1px solid var(--sand_300); + border: 1px solid var(--color-neutral-border); font-size: 14px; border-radius: 8px; box-shadow: 0 2px 6px 0 rgb(0 0 0 / 10%); box-sizing: border-box; - background: var(--sand_0); + background: var(--color-neutral-background-bold); } &__header { @@ -23,15 +23,17 @@ font-weight: 500; line-height: 24px; letter-spacing: 0.15px; + color: var(--color-neutral-content); } &__text { line-height: 20px; letter-spacing: 0.25px; + color: var(--color-neutral-content-subtler); } &__link { - color: var(--grape_500); + color: var(--color-primary-content-bold); font-weight: 500; &:hover { @@ -59,14 +61,14 @@ } svg > path { - stroke: var(--sand_600); + stroke: var(--color-neutral-content-subtlest); } &:hover { - background: var(--grape_0); + background: var(--color-primary-emphasis-subtle); svg > path { - stroke: var(--grape_700); + stroke: var(--color-primary-content-bold); } } } diff --git a/web/apps/labelstudio/src/components/Menu/Menu.scss b/web/apps/labelstudio/src/components/Menu/Menu.scss index 3c9067ebbc5a..8a4fb3a163db 100644 --- a/web/apps/labelstudio/src/components/Menu/Menu.scss +++ b/web/apps/labelstudio/src/components/Menu/Menu.scss @@ -7,8 +7,10 @@ list-style-type: none; max-width: 100%; box-sizing: border-box; - background: var(--sand_0); - border-radius: 4px; + background: var(--color-neutral-background); + border-radius: 0; + transition: background-color 400ms ease-out; + border-right: 1px solid var(--color-neutral-border); &__item { height: 48px; @@ -17,11 +19,12 @@ border-radius: 0.5rem; align-items: center; box-sizing: border-box; - color: var(--sand_600); + color: var(--color-neutral-content-subtler); font-size: 1rem; white-space: nowrap; text-decoration: none; cursor: pointer; + transition: all 150ms ease-out; &-icon { margin-right: 10px; @@ -47,27 +50,28 @@ &_look { &_danger { - color: var(--danger_color); + color: var(--color-negative-content-bold); } } &:not(.main-menu__item_look_danger):hover { - color: var(--sand_900); + color: var(--color-neutral-content); + background: var(--color-primary-emphasis-subtle); } &:not(.main-menu__item_active):hover { - color: var(--grape_700); - background: var(--grape_0); + color: var(--color-neutral-content); + background: var(--color-primary-emphasis-subtle); } &_active { - color: var(--sand_900); - background-color: var(--sand_200); + color: var(--color-neutral-content); font-weight: 500; } &_active:not(.sidebar__pin) { pointer-events: none; + background: var(--color-neutral-emphasis); } &:hover &-icon, @@ -76,11 +80,11 @@ } &_dangerous { - color: var(--danger_color); + color: var(--color-negative-content-bold); &:hover { - color: var(--danger_color) !important; - background-color: var(--red_1) !important; + color: var(--color-negative-content-bold) !important; + background-color: var(--color-negative-emphasis-subtle) !important; } } } @@ -92,7 +96,8 @@ &__divider { height: 1px; margin: 8px 0; - background-color: var(--sand_200); + background-color: var(--color-neutral-border); + transition: background-color 150ms ease-out; } &_size_compact { @@ -134,15 +139,15 @@ cursor: pointer; &:hover { - background-color: var(--grape_0); + background-color: var(--color-primary-emphasis-subtle); } &_dangerous { - color: var(--danger_color); + color: var(--color-negative-content-bold); &:hover { - color: var(--danger_color); - background-color: var(--red_1); + color: var(--color-negative-content-bold); + background-color: var(--color-negative-emphasis-subtle); } } } diff --git a/web/apps/labelstudio/src/components/Menubar/MenuContent.scss b/web/apps/labelstudio/src/components/Menubar/MenuContent.scss index 110d44b8ee36..fd359ed4e964 100644 --- a/web/apps/labelstudio/src/components/Menubar/MenuContent.scss +++ b/web/apps/labelstudio/src/components/Menubar/MenuContent.scss @@ -18,10 +18,11 @@ flex-direction: column; margin-left: 0; height: 100%; - background-color: var(--sand_0); + background-color: var(--color-neutral-background); transition: margin var(--menu-animation-duration) var(--menu-animation-curve); will-change: margin-left; - + transition: background-color 400ms ease-out; + &_withSidebar { margin-left: var(--menu-sidebar-width); } diff --git a/web/apps/labelstudio/src/components/Menubar/MenuSidebar.scss b/web/apps/labelstudio/src/components/Menubar/MenuSidebar.scss index 9e07f4d6a6a3..feb0b19af762 100644 --- a/web/apps/labelstudio/src/components/Menubar/MenuSidebar.scss +++ b/web/apps/labelstudio/src/components/Menubar/MenuSidebar.scss @@ -6,6 +6,9 @@ top: var(--header-height); height: calc(100vh - var(--header-height)); width: var(--menu-sidebar-width); + background: none; + transition: all 150ms ease-out; + border-radius: 0; .icon { transition: transform 0.1s ease; @@ -22,7 +25,7 @@ &:not(.sidebar_floating) { box-shadow: 1px 0 0 rgb(0 0 0 / 10%); - box-shadow: 0 1px 2px rgb(38 38 38 / 30%), 0 1px 3px 1px rgb(38 38 38 / 15%); + box-shadow: 0 1px 12px rgb(38 38 38 / 8%), 0 1px 4px 1px rgb(38 38 38 / 12%); .pin-menu { display: none; diff --git a/web/apps/labelstudio/src/components/Menubar/Menubar.jsx b/web/apps/labelstudio/src/components/Menubar/Menubar.jsx index 7f13680a47fe..74833a7e7f0c 100644 --- a/web/apps/labelstudio/src/components/Menubar/Menubar.jsx +++ b/web/apps/labelstudio/src/components/Menubar/Menubar.jsx @@ -12,6 +12,7 @@ import { LsSettings, LsSlack, } from "../../assets/icons"; +import { LSLogo } from "../../assets/images"; import { useConfig } from "../../providers/ConfigProvider"; import { useContextComponent, useFixedLocation } from "../../providers/RoutesProvider"; import { cn } from "../../utils/bem"; @@ -132,7 +133,7 @@ export const Menubar = ({ enabled, defaultOpened, defaultPinned, children, onSid
- Label Studio Logo +
diff --git a/web/apps/labelstudio/src/components/Menubar/Menubar.scss b/web/apps/labelstudio/src/components/Menubar/Menubar.scss index 1c23a05c8118..4d37cd0ace95 100644 --- a/web/apps/labelstudio/src/components/Menubar/Menubar.scss +++ b/web/apps/labelstudio/src/components/Menubar/Menubar.scss @@ -12,9 +12,9 @@ position: sticky; display: flex; box-sizing: border-box; - background-color: var(--sand_0); - justify-content: space-evenly; - border-bottom: 1px solid var(--sand_300); + background-color: var(--color-neutral-background); + border-bottom: 1px solid var(--color-neutral-border); + transition: background-color 400ms ease-out; &__context { flex: 1; @@ -42,7 +42,18 @@ min-width: 240px; max-width: 240px; box-sizing: border-box; - box-shadow: 1px 0 0 0 rgb(0 0 0 / 10%); + border-right: 1px solid var(--color-neutral-border); + transition: all 150ms ease-out; + + &:hover { + background-color: var(--color-neutral-background-bold); + } + } + + &__logo { + color: var(--color-neutral-content); + height: 22px; + width: 142px; } &__user { diff --git a/web/apps/labelstudio/src/components/Modal/Modal.scss b/web/apps/labelstudio/src/components/Modal/Modal.scss index 4e5a04bfa20d..b93b48dbe996 100644 --- a/web/apps/labelstudio/src/components/Modal/Modal.scss +++ b/web/apps/labelstudio/src/components/Modal/Modal.scss @@ -10,7 +10,7 @@ position: fixed; align-items: center; justify-content: center; - background-color: rgb(18 17 13 / 30%); + background-color: rgba(18 17 13 / 30%); will-change: opacity; &_optimize &__wrapper { @@ -32,9 +32,10 @@ margin: 0 auto; display: flex; flex-direction: column; - background-color: var(--sand_0); + background-color: var(--color-neutral-background); border-radius: 0.5rem; box-shadow: 0 10px 30px rgb(18 17 13 / 30%); + overflow: auto; } &__header { @@ -46,7 +47,7 @@ box-sizing: content-box; &_divided { - border-bottom: 1px solid var(--sand_300); + border-bottom: 1px solid var(--color-neutral-border); } } @@ -55,6 +56,7 @@ margin-right: auto; font-size: 1.75rem; font-weight: 500; + color: var(--color-neutral-content); } &__body { @@ -62,6 +64,7 @@ padding: 0 2rem 2rem; min-height: 0; line-height: 140%; + color: var(--color-neutral-content-subtle); &_bare { padding: 0; @@ -78,17 +81,17 @@ line-height: 22px; & a { - color: var(--grape_600); + color: var(--color-primary-content-bold); text-decoration: underline; &:hover { - color: var(--grape_700); + color: var(--color-primary-content-bold-light); } } &:not(.modal__footer_bare) { - background: var(--sand_100); - box-shadow: inset 0 1px 0 var(--sand_300); + background: var(--color-neutral-background-bold); + box-shadow: inset 0 1px 0 var(--color-neutral-border); } } diff --git a/web/apps/labelstudio/src/components/SidebarMenu/SidebarMenu.scss b/web/apps/labelstudio/src/components/SidebarMenu/SidebarMenu.scss index 3bb4fa0e09c0..5ea8e12bb97c 100644 --- a/web/apps/labelstudio/src/components/SidebarMenu/SidebarMenu.scss +++ b/web/apps/labelstudio/src/components/SidebarMenu/SidebarMenu.scss @@ -4,14 +4,14 @@ max-height: calc(100vh - var(--header-height)); &__navigation { - width: calc(var(--menu-sidebar-width) + 1px); + width: calc(var(--menu-sidebar-width)); display: flex; + transition: border 400ms ease-out; } &__content { flex: 1; overflow: auto; padding: 2rem; - box-shadow: -1px 0 0 0 rgb(0 0 0 / 10%); } } \ No newline at end of file diff --git a/web/apps/labelstudio/src/components/Toast/MessageToast.scss b/web/apps/labelstudio/src/components/Toast/MessageToast.scss index 2f86d69525f6..40497aede262 100644 --- a/web/apps/labelstudio/src/components/Toast/MessageToast.scss +++ b/web/apps/labelstudio/src/components/Toast/MessageToast.scss @@ -2,19 +2,19 @@ border-radius: 4px; &_info { - --background-color: var(--sand_900); - --hover-background-color: var(--sand_800); + --background-color: var(--color-neutral-inverted-background); + --hover-background-color: var(--color-neutral-inverted-background-bold-light); } &_error { - --background-color: var(--red_7); - --hover-background-color: var(--red_10); + --background-color: var(--color-negative-background); + --hover-background-color: var(--color-negative-background-light); } background-color: var(--background-color); .toast { - --border-color: var(--sand_900); + --border-color: var(--color-neutral-border); --padding: 8px 16px; background-color: inherit; diff --git a/web/apps/labelstudio/src/components/Userpic/Userpic.scss b/web/apps/labelstudio/src/components/Userpic/Userpic.scss index b5c02a51c6ed..1a6c97a5ed8b 100644 --- a/web/apps/labelstudio/src/components/Userpic/Userpic.scss +++ b/web/apps/labelstudio/src/components/Userpic/Userpic.scss @@ -7,10 +7,16 @@ position: relative; align-items: center; border-radius: 100%; - color: var(--sand_900); + color: var(--color-neutral-content); justify-content: center; - background: var(--sand_200); - box-shadow: inset 0 0 0 1px var(--sand_500); + background-color: var(--color-neutral-background-bold); + box-shadow: inset 0 0 0 1px var(--color-neutral-border); + transition: all 150ms ease-out; + + &:hover { + background-color: var(--color-primary-emphasis-light); + border-color: var(--color-primary-border-light); + } img { opacity: 0; diff --git a/web/apps/labelstudio/src/pages/CreateProject/Config/Config.scss b/web/apps/labelstudio/src/pages/CreateProject/Config/Config.scss index 57e5a1d18d4f..2c59228c37ff 100644 --- a/web/apps/labelstudio/src/pages/CreateProject/Config/Config.scss +++ b/web/apps/labelstudio/src/pages/CreateProject/Config/Config.scss @@ -45,7 +45,7 @@ $scroll-width: 5px; flex-direction: column; padding: 16px 16px - $scroll-width 16px 20px; overflow-y: scroll; - background-color: var(--sand_0); + background-color: var(--color-neutral-background); &::-webkit-scrollbar { width: $scroll-width; diff --git a/web/apps/labelstudio/src/pages/CreateProject/CreateProject.scss b/web/apps/labelstudio/src/pages/CreateProject/CreateProject.scss index bc42d3d4c35f..9518b7a4ea16 100644 --- a/web/apps/labelstudio/src/pages/CreateProject/CreateProject.scss +++ b/web/apps/labelstudio/src/pages/CreateProject/CreateProject.scss @@ -6,7 +6,7 @@ overflow-y: auto; & > .modal__header { - border-bottom: 1px solid var(--sand_300); + border-bottom: 1px solid var(--color-neutral-border); & h1 { width: 224px; diff --git a/web/apps/labelstudio/src/pages/CreateProject/Import/Import.scss b/web/apps/labelstudio/src/pages/CreateProject/Import/Import.scss index 1abcbda04273..2e7d7fccab66 100644 --- a/web/apps/labelstudio/src/pages/CreateProject/Import/Import.scss +++ b/web/apps/labelstudio/src/pages/CreateProject/Import/Import.scss @@ -16,7 +16,7 @@ & > header { font-size: 14px; padding: 24px 32px; - background: var(--sand_0); + background: var(--color-neutral-background); display: flex; align-items: center; @@ -29,7 +29,7 @@ display: flex; input { - border: 1px solid var(--sand_300); + border: 1px solid var(--color-neutral-border); line-height: 1em; width: 320px; border-radius: 5px 0 0 5px; @@ -38,14 +38,14 @@ button { margin-left: -1px; border-radius: 0 5px 5px 0; - background: var(--grape_500); + background: var(--color-primary-background-bold); color: var(--sand_0); cursor: pointer; } & + span { margin: 0 16px; - color: var(--sand_600); + color: var(--color-neutral-content-subtler); } } @@ -57,9 +57,9 @@ & > main { flex: 1; overflow-y: auto; - background: linear-gradient(white 30%, rgb(255 255 255 / 0%)), linear-gradient(rgb(0 0 0 / 10%), white 100%); + background: linear-gradient(var(--color-neutral-background) 30%, rgb(255 255 255 / 0%)), linear-gradient(rgb(0 0 0 / 10%), var(--color-neutral-background) 100%); background-repeat: no-repeat; - background-color: var(--sand_0); + background-color: var(--color-neutral-background); background-size: 100% 20px, 100% 5px; background-attachment: local, scroll; } @@ -107,8 +107,8 @@ display: flex; align-items: center; padding: 8px; - border: 1px solid var(--grape_500); - background: var(--grape_0); + border: 1px solid var(--color-primary-border); + background: var(--color-primary-background); border-radius: 4px; cursor: pointer; } @@ -163,11 +163,11 @@ position: relative; a { - color: var(--grape_600); + color: var(--color-primary-content-bold); text-decoration: underline; &:hover { - color: var(--grape_700); + color: var(--color-primary-content-bold-subtle); } } @@ -202,8 +202,8 @@ flex-direction: column; align-items: center; cursor: pointer; - background: var(--grape_0); - border: 1px dashed var(--grape_500); + background: var(--color-primary-emphasis-subtle); + border: 1px dashed var(--color-primary-border); padding: 2rem; width: 40rem; border-radius: 8px; diff --git a/web/apps/labelstudio/src/pages/Organization/PeoplePage/PeopleList.scss b/web/apps/labelstudio/src/pages/Organization/PeoplePage/PeopleList.scss index 31fb7c7b40bf..94cef955585c 100644 --- a/web/apps/labelstudio/src/pages/Organization/PeoplePage/PeopleList.scss +++ b/web/apps/labelstudio/src/pages/Organization/PeoplePage/PeopleList.scss @@ -5,8 +5,8 @@ &__wrapper { border-radius: 4px; - border: 1px solid var(--sand_300); - background: var(--sand_0); + border: 1px solid var(--color-neutral-border); + background: var(--color-neutral-background); } &__loading { @@ -34,7 +34,7 @@ height: 48px; padding: 0 10px; border: none; - color: var(--sand_900); + color: var(--color-neutral-content); display: flex; position: relative; align-items: center; @@ -59,7 +59,7 @@ &__field { &.last-activity { - color: var(--sand_600); + color: var(--color-neutral-content); } } @@ -73,18 +73,18 @@ display: flex; &:nth-child(odd):not(&_active) { - background-color: var(--sand_100); + background-color: var(--color-neutral-background-bold); } &_active { position: relative; - background-color: var(--sand_0); + background-color: var(--color-primary-background-bold); &::before, &::after { top: 0; bottom: 0; - left: -1px; + left: 0; content: ''; display: block; position: absolute; @@ -92,9 +92,9 @@ &::after { z-index: 1; - background-color: var(--sand_0); + background-color: var(--color-neutral-background-bold); width: calc(100% + 22px); - box-shadow: inset 2px 0 0 var(--grape_500), 1px 0 0 1px var(--sand_300) inset; + box-shadow: inset 4px 0 0 var(--grape_500), 1px 0 0 1px var(--color-neutral-border) inset; } &::before { diff --git a/web/apps/labelstudio/src/pages/Organization/PeoplePage/SelectedUser.scss b/web/apps/labelstudio/src/pages/Organization/PeoplePage/SelectedUser.scss index f99459f72620..eee041af4168 100644 --- a/web/apps/labelstudio/src/pages/Organization/PeoplePage/SelectedUser.scss +++ b/web/apps/labelstudio/src/pages/Organization/PeoplePage/SelectedUser.scss @@ -1,7 +1,7 @@ .user-info { padding: 20px 24px; - border: 1px solid var(--sand_300); - background: var(--sand_0); + border: 1px solid var(--color-neutral-border); + background: var(--color-neutral-background-bold); align-self: start; display: flex; flex-direction: column; @@ -25,7 +25,7 @@ grid-template: auto / 64px auto; column-gap: 16px; line-height: 1.5; - color: var(--sand_600); + color: var(--color-neutral-content); margin-bottom: 16px; align-items: center; } @@ -39,7 +39,7 @@ margin: 0; font-weight: 500; line-height: 1.2; - color: var(--sand_900); + color: var(--color-neutral-content); } &__section { @@ -51,11 +51,12 @@ margin-top: 1em; margin-bottom: 8px; font-weight: 500; + color: var(--color-neutral-content); } } &__last-active { - color: var(--sand_600); + color: var(--color-neutral-content-subtler); margin-top: 32px; margin-bottom: 0; } @@ -74,11 +75,11 @@ margin-left: -10px; align-items: center; border-radius: 4px; - color: var(--primary_link); + color: var(--color-primary-content-bold); &:hover { - background-color: var(--grape_0); - color: var(--grape_500); + background-color: var(--color-primary-emphasis); + color: var(--color-primary-content); } } } \ No newline at end of file diff --git a/web/apps/labelstudio/src/pages/Projects/Projects.scss b/web/apps/labelstudio/src/pages/Projects/Projects.scss index c54ffbb94a71..d7386ac75f04 100644 --- a/web/apps/labelstudio/src/pages/Projects/Projects.scss +++ b/web/apps/labelstudio/src/pages/Projects/Projects.scss @@ -90,21 +90,26 @@ } .project-card { - --text-color: var(--sand_900); - flex: 1; display: flex; flex-direction: column; - background: var(--sand_0); - border: 1px solid var(--sand_300); + background: var(--color-neutral-background); + border: 1px solid var(--color-neutral-border); border-radius: 0.5rem; overflow: hidden; - color: var(--text-color); + color: var(--color-neutral-content-subtle); box-shadow: 0 4px 8px rgb(0 0 0 / 5%); + transition: all 150ms ease-out; + + &:hover { + background-color: var(--color-neutral-background-bold); + border-color: var(--color-primary-border); + } &__header { padding: 12px 16px; - border-bottom: 1px solid var(--sand_300); + border-bottom: 1px solid var(--color-neutral-border); + transition: all 150ms ease-out; } &__menu { @@ -168,11 +173,11 @@ &_type { &_completed { - --icon-color: var(--kale_400); + --icon-color: var(--color-positive-content-bold); } &_rejected { - --icon-color: var(--red_7); + --icon-color: var(--color-negative-content-bold); } &_predictions { diff --git a/web/apps/labelstudio/src/pages/Settings/AnnotationSettings.jsx b/web/apps/labelstudio/src/pages/Settings/AnnotationSettings.jsx index 9d08c1c76b1b..3866b05a8370 100644 --- a/web/apps/labelstudio/src/pages/Settings/AnnotationSettings.jsx +++ b/web/apps/labelstudio/src/pages/Settings/AnnotationSettings.jsx @@ -36,7 +36,7 @@ export const AnnotationSettings = () => { > Labeling Instructions -
+

Write instructions to help users complete labeling tasks.

The instruction field supports HTML markup and it allows use of images, iframes (pdf). diff --git a/web/apps/labelstudio/src/pages/Settings/settings.scss b/web/apps/labelstudio/src/pages/Settings/settings.scss index a9340dad5d79..8946781cd463 100644 --- a/web/apps/labelstudio/src/pages/Settings/settings.scss +++ b/web/apps/labelstudio/src/pages/Settings/settings.scss @@ -12,16 +12,23 @@ font-weight: 500; margin-top: 0; font-size: 1.75rem; + color: var(--color-neutral-content); } } +.settings-description { + color: var(--color-neutral-content-subtler); +} + .settings-wrapper { --column-count: 1; - border: 1px solid var(--sand_300); + border: 1px solid var(--color-neutral-border); border-radius: 0.5rem; padding: 1.5rem; width: 40rem; + color: var(--color-neutral-content-subtle); + & +.settings-wrapper, & +.form-wrapper { @@ -37,7 +44,9 @@ font-weight: 500; font-size: 1.5rem; margin-bottom: 0; + color: var(--color-neutral-content); } + } .general-settings { @@ -70,13 +79,13 @@ &__title { font-size: 0.875rem; - color: var(--sand_900); + color: var(--color-neutral-content); font-weight: 500; } } .settings-caption { - color: var(--sand_700); + color: var(--color-neutral-content-subtler); font-size: 12px; font-style: normal; font-weight: 400; @@ -84,7 +93,7 @@ letter-spacing: 0.4px; a { - color: var(--primary_link); + color: var(--color-primary-content-bold); font-size: 12px; font-style: normal; font-weight: 500; @@ -106,7 +115,7 @@ margin: 0; a { - color: var(--primary_link); + color: var(--color-primary-content-bold); font-size: 14px; font-style: normal; font-weight: 500; @@ -142,7 +151,7 @@ margin-top: 5px; font-size: 14px; line-height: 22px; - color: var(--sand_600); + color: var(--color-neutral-content-subtle); font-weight: 500; padding: 0 16px; height: 22px; diff --git a/web/apps/labelstudio/src/pages/WebhookPage/WebhookPage.scss b/web/apps/labelstudio/src/pages/WebhookPage/WebhookPage.scss index e3aeb39774c5..ad64d4f317e4 100644 --- a/web/apps/labelstudio/src/pages/WebhookPage/WebhookPage.scss +++ b/web/apps/labelstudio/src/pages/WebhookPage/WebhookPage.scss @@ -21,17 +21,18 @@ flex: none; width: 100%; height: 112px - 24px; - background: var(--sand_100); - border: 1px var(--sand_300) solid; + background: var(--color-primary-background); + border: 1px var(--color-primary-border-light) solid; margin-left: -2px; display: flex; padding-top: 24px; + border-radius: var(--radius-small); } &__footer-text { width: 42rem; font-size: 0.875rem; - color: var(--sand_600); + color: var(--color-neutral-content-subtle); & p { margin: 0; @@ -39,7 +40,7 @@ } & a { - color: var(--grape_600); + color: var(--color-primary-content-bold); text-decoration: underline; } } @@ -147,7 +148,7 @@ } &__black-text { - color: var(--sand_900); + color: var(--color-neutral-content); } &__activator { @@ -184,7 +185,7 @@ } &__headers { - border: 1px solid var(--sand_300); + border: 1px solid var(--color-neutral-border); padding: 1rem; border-radius: 0.5rem; margin-bottom: 1rem; @@ -224,7 +225,7 @@ } .webhook-payload { - border: 1px solid var(--sand_300); + border: 1px solid var(--color-neutral-border); padding: 1rem; border-radius: 0.5rem; margin-bottom: 1rem; diff --git a/web/libs/datamanager/src/components/App/App.scss b/web/libs/datamanager/src/components/App/App.scss index 748813cfbeb6..579491c13081 100644 --- a/web/libs/datamanager/src/components/App/App.scss +++ b/web/libs/datamanager/src/components/App/App.scss @@ -1,13 +1,13 @@ .root { height: 100%; box-sizing: border-box; - background-color: #f0f0f0; + background-color: var(--color-neutral-background); } .tab-panel { display: flex; padding: 12px 16px; - background-color: var(--sand_0); + background-color: var(--color-neutral-background); justify-content: space-between; &_newUI { diff --git a/web/libs/datamanager/src/components/Common/Button/Button.scss b/web/libs/datamanager/src/components/Common/Button/Button.scss index 513dacc1c9ce..654c93540365 100644 --- a/web/libs/datamanager/src/components/Common/Button/Button.scss +++ b/web/libs/datamanager/src/components/Common/Button/Button.scss @@ -1,5 +1,5 @@ .button-dm { - --button-color: var(--black); + --button-color: var(--color-neutral-content); height: 32px; border: none; @@ -7,7 +7,7 @@ padding: 0 15px; outline: none; display: inline-flex; - background-color: var(--white); + background-color: var(--color-neutral-background); align-items: center; border-radius: 5px; text-align: center; @@ -15,7 +15,7 @@ transition: all 100ms ease; justify-content: center; color: var(--button-color); - box-shadow: inset 0 -1px 0 var(--black_10), inset 0 0 0 1px var(--black_15); + box-shadow: inset 0 -1px 0 var(--color-neutral-border), inset 0 0 0 1px var(--color-neutral-border); font-weight: 500; font-size: 14px; diff --git a/web/libs/datamanager/src/components/Common/Modal/Modal.scss b/web/libs/datamanager/src/components/Common/Modal/Modal.scss index 5e44454f7726..908ba109b367 100644 --- a/web/libs/datamanager/src/components/Common/Modal/Modal.scss +++ b/web/libs/datamanager/src/components/Common/Modal/Modal.scss @@ -27,7 +27,7 @@ min-width: 400px; min-height: 100px; margin: 0 auto; - background-color: var(--white); + background-color: var(--color-neutral-background); border-radius: 5px; box-shadow: 0 10px 30px rgb(var(--black-raw) / 30%); } @@ -41,7 +41,7 @@ box-sizing: content-box; &_divided { - border-bottom: 1px solid var(--black_5); + border-bottom: 1px solid var(--color-neutral-border); } } diff --git a/web/libs/datamanager/src/components/Common/Resizer/Resizer.scss b/web/libs/datamanager/src/components/Common/Resizer/Resizer.scss index 9467852f2681..3d6c66cdb8d5 100644 --- a/web/libs/datamanager/src/components/Common/Resizer/Resizer.scss +++ b/web/libs/datamanager/src/components/Common/Resizer/Resizer.scss @@ -30,7 +30,7 @@ content: ""; z-index: 5; display: block; - background: #bdbdbd; + background: var(--color-neutral-border); position: absolute; } @@ -42,8 +42,8 @@ &_resizing::before { top: 0; bottom: 0; - background-color: var(--accent_color); - box-shadow: 0 0 0 1px var(--accent_color); + background-color: var(--color-primary-border); + box-shadow: 0 0 0 1px var(--color-primary-border); } } } diff --git a/web/libs/datamanager/src/components/Common/Table/Table.scss b/web/libs/datamanager/src/components/Common/Table/Table.scss index a4708adb6252..834274d3f8f4 100644 --- a/web/libs/datamanager/src/components/Common/Table/Table.scss +++ b/web/libs/datamanager/src/components/Common/Table/Table.scss @@ -10,7 +10,7 @@ z-index: 1000; height: 28px; width: 28px; - background-color: var(--white); + background-color: var(--color-neutral-background); box-shadow: 0 2px 5px 0 var(--black_20); margin: 6.5px 20px; border-radius: 4px; @@ -34,7 +34,7 @@ display: flex; flex-direction: column; overflow: auto; - background-color: var(--white); + background-color: var(--color-neutral-background); &_fit { width: max-content; @@ -66,7 +66,7 @@ min-width: fit-content; position: relative; cursor: pointer; - background-color: var(--sand_0); + background-color: var(--color-neutral-background); &_disabled, &_loading { @@ -75,15 +75,15 @@ } &_even:not(.table__row_wrapper_selected) { - background-color: var(--sand_100); + background-color: var(--color-neutral-background-bold); } &_selected { - background-color: var(--grape_0); + background-color: var(--color-primary-emphasis); } &:not(.table__row_wrapper_selected):hover { - background-color: var(--grape_0); + background-color: var(--color-primary-emphasis-subtle); } &_highlighted:not(.table__row_wrapper_selected)::after { @@ -111,6 +111,7 @@ position: relative; overflow: hidden; word-break: break-word; + color: var(--color-neutral-content-subtler); } &__cell-content { @@ -118,6 +119,7 @@ display: flex; white-space: nowrap; align-items: center; + color: var(--color-neutral-content); &_disabled { opacity: 0.6; diff --git a/web/libs/datamanager/src/components/Common/Table/TableHead/TableHead.scss b/web/libs/datamanager/src/components/Common/Table/TableHead/TableHead.scss index 2e3fb3da573a..e5694bda0f5f 100644 --- a/web/libs/datamanager/src/components/Common/Table/TableHead/TableHead.scss +++ b/web/libs/datamanager/src/components/Common/Table/TableHead/TableHead.scss @@ -5,10 +5,11 @@ z-index: 150; font-weight: 500; overflow: visible; - background-color: var(--white); + background-color: var(--color-neutral-background); min-width: fit-content; font-size: 14px; - border-bottom: 1px solid #D8D5DD; + border-bottom: 1px solid var(--color-neutral-border); + color: var(--color-neutral-content); &__extra { flex: 1; diff --git a/web/libs/datamanager/src/components/Common/TableOld/Table.scss b/web/libs/datamanager/src/components/Common/TableOld/Table.scss index a4708adb6252..84e67eb8b8de 100644 --- a/web/libs/datamanager/src/components/Common/TableOld/Table.scss +++ b/web/libs/datamanager/src/components/Common/TableOld/Table.scss @@ -34,7 +34,7 @@ display: flex; flex-direction: column; overflow: auto; - background-color: var(--white); + background-color: var(--color-neutral-background); &_fit { width: max-content; diff --git a/web/libs/datamanager/src/components/Common/Tabs/Tabs.scss b/web/libs/datamanager/src/components/Common/Tabs/Tabs.scss index faf57b453fe6..29add8035609 100644 --- a/web/libs/datamanager/src/components/Common/Tabs/Tabs.scss +++ b/web/libs/datamanager/src/components/Common/Tabs/Tabs.scss @@ -3,8 +3,10 @@ display: flex; align-items: stretch; justify-content: space-between; - box-shadow: 0 -1px 0 #D9D9D9 inset; - background: var(--sand_200); + box-shadow: 0 -1px 0 var(--color-neutral-border) inset; + background: var(--color-neutral-background-bold); + // border-bottom: 1px solid var(--color-neutral-border); + padding-top: 2px; &-content { &__draggable { @@ -19,26 +21,31 @@ &__droppable { display: flex; overflow: hidden; + gap: 2px; } &__list { display: flex; min-width: 0; + gap: 2px; } &__item { - color: rgb(0 0 0 / 50%); + color: var(--color-neutral-content-subtler); + background-color: var(--color-neutral-background-bold-dark); width: 100%; overflow: hidden; cursor: pointer; position: relative; - box-shadow: -0.5px 0 0 #D9D9D9 inset, 0.5px 0 0 #D9D9D9 inset; + box-shadow: 0 -3px 0 var(--color-neutral-border) inset; + border-top-left-radius: 4px; + border-top-right-radius: 4px; &_active { - color: black; + color: var(--color-neutral-content); cursor: default; - background-color: var(--white); - box-shadow: -0.5px 0 0 #D9D9D9 inset, 0.5px 0 0 #D9D9D9 inset; + background-color: var(--color-neutral-background); + box-shadow: -1px 0 0 var(--color-neutral-border) inset, 1px 0 0 var(--color-neutral-border) inset, 0 1px 0 var(--color-neutral-border) inset; & .tabs-dm__item-right-button { display: flex; @@ -103,7 +110,7 @@ display: flex; align-items: center; justify-content: center; - color: var(--black_15) !important; + color: var(--color-neutral-content-subtlest); background: none; &:focus { @@ -111,7 +118,7 @@ } &:hover { - color: rgb(0 0 0 / 35%) !important; + color: var(--color-primary-content-bold); } } diff --git a/web/libs/datamanager/src/components/DataManager/DataManager.jsx b/web/libs/datamanager/src/components/DataManager/DataManager.jsx index 7db811663a79..c4868218c80f 100644 --- a/web/libs/datamanager/src/components/DataManager/DataManager.jsx +++ b/web/libs/datamanager/src/components/DataManager/DataManager.jsx @@ -94,7 +94,7 @@ const TabsSwitch = switchInjector( {...provided.draggableProps} {...provided.dragHandleProps} style={{ - background: snapshot.isDragging && "#ddd", + background: snapshot.isDragging, ...provided.draggableProps.style, }} > diff --git a/web/libs/datamanager/src/components/Label/Label.scss b/web/libs/datamanager/src/components/Label/Label.scss index fb5d615960c8..261f86f0ce6b 100644 --- a/web/libs/datamanager/src/components/Label/Label.scss +++ b/web/libs/datamanager/src/components/Label/Label.scss @@ -5,6 +5,7 @@ width: 100%; display: flex; flex-direction: column; + color: var(--color-neutral-content); &__waiting { top: 50%; @@ -86,7 +87,7 @@ overflow-y: auto; & > div { - --main-bg-color: var(--sand_100); + --main-bg-color: var(--color-neutral-background-bold); flex: 1; height: auto; diff --git a/web/libs/datamanager/src/components/MainView/DataView/Table.scss b/web/libs/datamanager/src/components/MainView/DataView/Table.scss index 97e6386634a4..ee467b26ad75 100644 --- a/web/libs/datamanager/src/components/MainView/DataView/Table.scss +++ b/web/libs/datamanager/src/components/MainView/DataView/Table.scss @@ -3,7 +3,7 @@ display: flex; overflow: hidden; flex-direction: column; - background: var(--sand_0); + background: var(--color-neutral-background); } .no-results { @@ -14,9 +14,15 @@ align-items: center; &__description { + + h3 { + color: var(--color-neutral-content); + } + font-size: 16px; text-align: center; - color: rgb(var(--black-raw) / 60%); + color: var(--color-neutral-content-subtler); + margin-bottom: 8px; } } diff --git a/web/libs/editor/src/common/Modal/Modal.scss b/web/libs/editor/src/common/Modal/Modal.scss index d14e7aa0f26c..2ca3a47e11a0 100644 --- a/web/libs/editor/src/common/Modal/Modal.scss +++ b/web/libs/editor/src/common/Modal/Modal.scss @@ -28,7 +28,7 @@ min-width: 400px; min-height: 100px; margin: 0 auto; - background-color: var(--sand_0); + background-color: var(--color-neutral-background); border-radius: 5px; box-shadow: 0 10px 30px rgb(0 0 0 / 30%); } @@ -42,7 +42,7 @@ box-sizing: content-box; &_divided { - border-bottom: 1px solid var(--sand_300); + border-bottom: 1px solid var(--color-neutral-border); } } @@ -65,7 +65,7 @@ &__footer { padding: 16px 32px; - background: var(--sand_200); + background: var(--color-neutral-background-bold); box-shadow: inset 0 1px 0 rgb(0 0 0 / 5%); text-align: center; font-size: 14px; diff --git a/web/libs/editor/src/common/Tooltip/Tooltip.scss b/web/libs/editor/src/common/Tooltip/Tooltip.scss index 61256c007f5a..c489c6f8b349 100644 --- a/web/libs/editor/src/common/Tooltip/Tooltip.scss +++ b/web/libs/editor/src/common/Tooltip/Tooltip.scss @@ -5,13 +5,13 @@ top: -1000px; left: -1000px; - color: var(--sand_0); + color: var(--color-neutral-inverted-content); display: none; z-index: 10000; padding: 4px 10px; position: absolute; pointer-events: none; - background-color: var(--sand_900); + background-color: var(--color-neutral-inverted-background); border-radius: 3px; &::before { @@ -22,7 +22,7 @@ height: 10px; display: block; position: absolute; - background-color: var(--sand_900); + background-color: var(--color-neutral-inverted-background); transform: translate(-50%, 50%) rotate(45deg); } @@ -83,11 +83,11 @@ &_theme { &_light { color: var(--sand_900); - background-color: var(--sand_0); + background-color: var(--color-neutral-background); box-shadow: 0 2px 15px rgb(0 0 0 / 20%); &::before { - background-color: var(--sand_0); + background-color: var(--color-neutral-content); } } } diff --git a/web/libs/editor/src/components/BottomBar/BottomBar.scss b/web/libs/editor/src/components/BottomBar/BottomBar.scss index 9dec19787b77..2d173296fadc 100644 --- a/web/libs/editor/src/components/BottomBar/BottomBar.scss +++ b/web/libs/editor/src/components/BottomBar/BottomBar.scss @@ -6,8 +6,8 @@ display: flex; align-items: stretch; justify-content: space-between; - background-color: var(--sand_0); - border-bottom: 1px solid var(--sand_300); + background-color: var(--color-neutral-background); + border-bottom: 1px solid var(--color-neutral-border); user-select: none; position: absolute; bottom: 0; @@ -30,7 +30,7 @@ & .button { &_withIcon { &:not([disabled]):hover { - background-color: var(--sand_200) !important; + background-color: var(--color-primary-emphasis-subtle) !important; border-radius: 4px; } } diff --git a/web/libs/editor/src/components/TopBar/TopBar.scss b/web/libs/editor/src/components/TopBar/TopBar.scss index 3b99c5d985c2..a9ff3fef3a83 100644 --- a/web/libs/editor/src/components/TopBar/TopBar.scss +++ b/web/libs/editor/src/components/TopBar/TopBar.scss @@ -6,15 +6,15 @@ display: flex; align-items: stretch; justify-content: space-between; - background-color: var(--sand_0); - border-bottom: 1px solid var(--sand_300); + background-color: var(--color-neutral-backround-bold-dark); + border-bottom: 1px solid var(--color-neutral-border); user-select: none; position: sticky; top: 0; &__button { &:hover { - background-color: var(--grape_0); + background-color: var(--color-primary-emphasis-subtle); } } @@ -34,15 +34,15 @@ } & + & { - border-left: 1px solid var(--sand_300); + border-left: 1px solid var(--color-neutral-border); } } &_newLabelingUI { display: block; - background-color: var(--sand_0); + background-color: var(--color-neutral-background-bold-dark); height: 42px; - border-bottom: 1px solid var(--sand_300); + border-bottom: 1px solid var(--color-neutral-border); & .topbar { &__group { diff --git a/web/libs/editor/src/regions/TextAreaRegion/TextAreaRegion.scss b/web/libs/editor/src/regions/TextAreaRegion/TextAreaRegion.scss index 9d1bdb727f13..50894c1611bc 100644 --- a/web/libs/editor/src/regions/TextAreaRegion/TextAreaRegion.scss +++ b/web/libs/editor/src/regions/TextAreaRegion/TextAreaRegion.scss @@ -1,25 +1,26 @@ .mark { - background-color: var(--surface-surface); - border: 1px solid var(--surface-border); + background-color: var(--color-neutral-background-bold); + border: 1px solid var(--color-neutral-border); border-radius: var(--radius-small); margin: 0 var(--spacing-small) 0 0; padding: var(--spacing-small) var(--spacing-medium); white-space: pre-line; box-shadow: 0 4px 12px 0 var(--black_4), 0 1px 2px 0 var(--black_10); flex-grow: 1; + color: var(--color-neutral-content); &.ant-typography { margin-bottom: 0; } &.selected { - border: 1px solid var(--grape_500); - background-color: var(--primary-bright-secondary); + border: 1px solid var(--color-primary-border); + background-color: var(--color-primary-emphasis); } &.highlighted { - border: 1px dashed var(--grape_500); - background-color: var(--primary-bright-secondary); + border: 1px dashed var(--color-primary-border); + background-color: var(--color-primary-emphasis-subtle); } &.relation { @@ -39,13 +40,13 @@ flex: 0 0 32px; &:hover { - background-color: var(--sand_200); + background-color: var(--color-neutral-background-bold); } &_look { &_danger { &:hover { - background-color: var(--red_1); + background-color: var(--color-negative-emphasis-subtle); } } } diff --git a/web/libs/ui/src/tokens/colors.scss b/web/libs/ui/src/tokens/colors.scss index befd6bc7f704..aee4086d47e1 100644 --- a/web/libs/ui/src/tokens/colors.scss +++ b/web/libs/ui/src/tokens/colors.scss @@ -1,4 +1,5 @@ :root { + // Deprecated: [DO NOT USE] --black-raw: 0 0 0; --white-raw: 255 255 255; --accent_color-raw: 86 111 207; @@ -96,4 +97,387 @@ --button-waiting-animation-bg: repeating-linear-gradient(-63.43deg,hsl(60deg 20% 99% / 20%) 1px,#efefef 2px,#efefef 6px,hsl(60deg 20% 99% / 20%) 7px,hsl(60deg 20% 99% / 20%) 12px); --project-title-icon-primary-color: rgba(var(--black-raw), 0.35); --project-title-icon-alternate-color: rgba(var(--white-raw), 0.35); + + /* Primitive Tokens [DO NOT USE] */ + // Primitive Tokens: Colors + --color-blueberry-000: #f0f7fe; + --color-blueberry-100: #d4e7fb; + --color-blueberry-200: #b6d6f8; + --color-blueberry-300: #99c5f5; + --color-blueberry-400: #539eee; + --color-blueberry-500: #3287e2; + --color-blueberry-600: #2b78ca; + --color-blueberry-700: #2b69ab; + --color-blueberry-800: #25507e; + --color-blueberry-900: #1c3c5f; + --color-blueberry-950: #0b1826; + --color-canteloupe-000: #fff6ef; + --color-canteloupe-100: #ffe4d0; + --color-canteloupe-200: #ffd3b1; + --color-canteloupe-300: #ffb882; + --color-canteloupe-400: #ffa663; + --color-canteloupe-500: #e69559; + --color-canteloupe-600: #cc854f; + --color-canteloupe-700: #b37445; + --color-canteloupe-800: #99643a; + --color-canteloupe-900: #664228; + --color-canteloupe-950: #331c14; + --color-fig-000: #f8f2fc; + --color-fig-100: #e9d6f7; + --color-fig-200: #dabdf1; + --color-fig-300: #c595e9; + --color-fig-400: #ac79d2; + --color-fig-500: #9f6cc6; + --color-fig-600: #9262b6; + --color-fig-700: #7f569f; + --color-fig-800: #6d4a88; + --color-fig-900: #5b3e72; + --color-fig-950: #1f1526; + --color-grape-000: #f0f3fe; + --color-grape-100: #d4dbfb; + --color-grape-200: #b6c3f8; + --color-grape-300: #99abf5; + --color-grape-400: #6d87f1; + --color-grape-500: #617ada; + --color-grape-600: #576cc1; + --color-grape-700: #4c5fa9; + --color-grape-800: #37447a; + --color-grape-900: #2b3660; + --color-grape-950: #111626; + --color-kale-000: #f4f9f9; + --color-kale-100: #d4f1eb; + --color-kale-200: #abe4da; + --color-kale-300: #7acec1; + --color-kale-400: #57b7ab; + --color-kale-500: #34988d; + --color-kale-600: #287a72; + --color-kale-700: #22625d; + --color-kale-800: #204f4d; + --color-kale-900: #1f4240; + --color-kale-950: #122625; + --color-kiwi-000: #f6f9f4; + --color-kiwi-100: #def1d4; + --color-kiwi-200: #bfe4ab; + --color-kiwi-300: #97ce7a; + --color-kiwi-400: #78b757; + --color-kiwi-500: #579834; + --color-kiwi-600: #457a28; + --color-kiwi-700: #386222; + --color-kiwi-800: #304f20; + --color-kiwi-900: #2b421f; + --color-kiwi-950: #192612; + --color-mango-000: #fff9ef; + --color-mango-100: #ffeed0; + --color-mango-200: #ffe2b1; + --color-mango-300: #ffd182; + --color-mango-400: #faba4c; + --color-mango-500: #f4aa2a; + --color-mango-600: #eb9c14; + --color-mango-700: #cc8e24; + --color-mango-800: #a07222; + --color-mango-900: #624718; + --color-mango-950: #261c0a; + --color-persimmon-000: #fff1ee; + --color-persimmon-100: #ffd6cd; + --color-persimmon-200: #ffbaaa; + --color-persimmon-300: #ff9f89; + --color-persimmon-400: #ff7557; + --color-persimmon-500: #e6694e; + --color-persimmon-600: #cc5e46; + --color-persimmon-700: #b3523d; + --color-persimmon-800: #994634; + --color-persimmon-900: #803b2c; + --color-persimmon-950: #26120d; + --color-plum-000: #fbf2fc; + --color-plum-100: #f7d6f2; + --color-plum-200: #f1bde9; + --color-plum-300: #e995dc; + --color-plum-400: #e37bd3; + --color-plum-500: #cc6fbe; + --color-plum-600: #b662a9; + --color-plum-700: #9f5694; + --color-plum-800: #884a80; + --color-plum-900: #723e6a; + --color-plum-950: #261524; + --color-sand-000: #fdfdfc; + --color-sand-100: #f9f8f6; + --color-sand-200: #f0efeb; + --color-sand-300: #e1ded5; + --color-sand-400: #cac5b8; + --color-sand-500: #a49f95; + --color-sand-600: #6b6860; + --color-sand-700: #45433e; + --color-sand-800: #262522; + --color-sand-900: #12110d; + --color-sand-950: #080706; + + /* Semantic Tokens */ + // Semantic Tokens: Colors + + // Light Color Scheme (Default) + --color-accent-blueberry-bold: var(--color-blueberry-500); + --color-accent-blueberry-dark: var(--color-blueberry-900); + --color-accent-blueberry-subtle: var(--color-blueberry-100); + --color-accent-blueberry-subtlest: var(--color-blueberry-000); + --color-accent-canteloupe-bold: var(--color-canteloupe-500); + --color-accent-canteloupe-dark: var(--color-canteloupe-900); + --color-accent-canteloupe-subtle: var(--color-canteloupe-100); + --color-accent-canteloupe-subtlest: var(--color-canteloupe-000); + --color-accent-fig-bold: var(--color-fig-500); + --color-accent-fig-dark: var(--color-fig-900); + --color-accent-fig-subtle: var(--color-fig-100); + --color-accent-fig-subtlest: var(--color-fig-000); + --color-accent-grape-bold: var(--color-grape-500); + --color-accent-grape-dark: var(--color-grape-900); + --color-accent-grape-subtle: var(--color-grape-100); + --color-accent-grape-subtlest: var(--color-grape-000); + --color-accent-kale-bold: var(--color-kale-500); + --color-accent-kale-dark: var(--color-kale-900); + --color-accent-kale-subtle: var(--color-kale-100); + --color-accent-kale-subtlest: var(--color-kale-000); + --color-accent-kiwi-bold: var(--color-kiwi-500); + --color-accent-kiwi-dark: var(--color-kiwi-900); + --color-accent-kiwi-subtle: var(--color-kiwi-100); + --color-accent-kiwi-subtlest: var(--color-kiwi-000); + --color-accent-mango-bold: var(--color-mango-500); + --color-accent-mango-dark: var(--color-mango-900); + --color-accent-mango-subtle: var(--color-mango-100); + --color-accent-mango-subtlest: var(--color-mango-000); + --color-accent-persimmon-bold: var(--color-persimmon-500); + --color-accent-persimmon-dark: var(--color-persimmon-900); + --color-accent-persimmon-subtle: var(--color-persimmon-100); + --color-accent-persimmon-subtlest: var(--color-persimmon-000); + --color-accent-plum-bold: var(--color-plum-500); + --color-accent-plum-dark: var(--color-plum-900); + --color-accent-plum-subtle: var(--color-plum-100); + --color-accent-plum-subtlest: var(--color-plum-000); + --color-accent-sand-bold: var(--color-sand-500); + --color-accent-sand-dark: var(--color-sand-900); + --color-accent-sand-subtle: var(--color-sand-100); + --color-accent-sand-subtlest: var(--color-sand-100); + --color-negative-background: var(--color-persimmon-000); + --color-negative-background-bold: var(--color-persimmon-600); + --color-negative-background-bold-dark: var(--color-persimmon-800); + --color-negative-background-bold-light: var(--color-persimmon-500); + --color-negative-border: var(--color-persimmon-700); + --color-negative-border-dark: var(--color-persimmon-800); + --color-negative-border-light: var(--color-persimmon-500); + --color-negative-border-lighter: var(--color-persimmon-300); + --color-negative-border-lightest: var(--color-persimmon-200); + --color-negative-content: var(--color-persimmon-000); + --color-negative-content-bold: var(--color-persimmon-700); + --color-negative-content-bold-subtle: var(--color-persimmon-500); + --color-negative-content-subtle: var(--color-persimmon-100); + --color-negative-emphasis: var(--color-persimmon-200); + --color-negative-emphasis-subtle: var(--color-persimmon-100); + --color-negative-focus-outline: var(--color-persimmon-200); + --color-neutral-background: var(--color-sand-000); + --color-neutral-background-bold: var(--color-sand-100); + --color-neutral-background-bold-dark: var(--color-sand-200); + --color-neutral-background-bold-light: var(--color-sand-000); + --color-neutral-border: var(--color-sand-300); + --color-neutral-border-dark: var(--color-sand-400); + --color-neutral-border-darker: var(--color-sand-500); + --color-neutral-border-darkest: var(--color-sand-600); + --color-neutral-border-light: var(--color-sand-300); + --color-neutral-border-lighter: var(--color-sand-200); + --color-neutral-content: var(--color-sand-800); + --color-neutral-content-subtle: var(--color-sand-700); + --color-neutral-content-subtler: var(--color-sand-600); + --color-neutral-content-subtlest: var(--color-sand-500); + --color-neutral-emphasis: var(--color-sand-200); + --color-neutral-emphasis-subtle: var(--color-sand-100); + --color-neutral-shadow: var(--color-neutral-900); + --color-neutral-inverted-background: var(--color-sand-900); + --color-neutral-inverted-background-bold: var(--color-sand-900); + --color-neutral-inverted-background-bold-dark: var(--color-sand-700); + --color-neutral-inverted-background-bold-light: var(--color-sand-800); + --color-neutral-inverted-border: var(--color-sand-800); + --color-neutral-inverted-content: var(--color-sand-100); + --color-neutral-inverted-content-subtle: var(--color-sand-400); + --color-neutral-inverted-content-subtler: var(--color-sand-300); + --color-neutral-inverted-content-subtlest: var(--color-sand-500); + --color-positive-background: var(--color-kale-000); + --color-positive-background-bold: var(--color-kale-600); + --color-positive-background-bold-dark: var(--color-kale-800); + --color-positive-background-bold-light: var(--color-kale-500); + --color-positive-border: var(--color-kale-700); + --color-positive-border-dark: var(--color-kale-800); + --color-positive-border-light: var(--color-kale-500); + --color-positive-border-lighter: var(--color-kale-300); + --color-positive-border-lightest: var(--color-kale-200); + --color-positive-content: var(--color-kale-000); + --color-positive-content-bold: var(--color-kale-700); + --color-positive-content-bold-subtle: var(--color-kale-600); + --color-positive-content-subtle: var(--color-kale-100); + --color-positive-emphasis: var(--color-kale-200); + --color-positive-emphasis-subtle: var(--color-kale-100); + --color-positive-focus-outline: var(--color-kale-200); + --color-primary-background: var(--color-grape-000); + --color-primary-background-bold: var(--color-grape-700); + --color-primary-background-bold-dark: var(--color-grape-800); + --color-primary-background-bold-light: var(--color-grape-600); + --color-primary-border: var(--color-grape-700); + --color-primary-border-dark: var(--color-grape-800); + --color-primary-border-light: var(--color-grape-500); + --color-primary-border-lighter: var(--color-grape-300); + --color-primary-border-lightest: var(--color-grape-200); + --color-primary-content: var(--color-grape-000); + --color-primary-content-bold: var(--color-grape-700); + --color-primary-content-bold-subtle: var(--color-grape-500); + --color-primary-content-subtle: var(--color-grape-100); + --color-primary-emphasis: var(--color-grape-100); + --color-primary-emphasis-subtle: var(--color-grape-000); + --color-primary-focus-outline: var(--color-grape-200); + --color-warning-background: var(--color-canteloupe-000); + --color-warning-background-bold: var(--color-canteloupe-600); + --color-warning-background-bold-dark: var(--color-canteloupe-800); + --color-warning-background-bold-light: var(--color-canteloupe-500); + --color-warning-border: var(--color-canteloupe-700); + --color-warning-border-dark: var(--color-canteloupe-800); + --color-warning-border-light: var(--color-canteloupe-500); + --color-warning-border-lighter: var(--color-canteloupe-300); + --color-warning-border-lightest: var(--color-canteloupe-200); + --color-warning-content: var(--color-canteloupe-000); + --color-warning-content-bold: var(--color-canteloupe-800); + --color-warning-content-bold-subtle: var(--color-canteloupe-600); + --color-warning-content-subtle: var(--color-canteloupe-100); + --color-warning-emphasis: var(--color-canteloupe-200); + --color-warning-emphasis-subtle: var(--color-canteloupe-100); + --color-warning-focus-outline: var(--color-canteloupe-200); + + // Dark Color Scheme + &[data-color-scheme="dark"] { + --color-accent-blueberry-bold: var(--color-blueberry-500); + --color-accent-blueberry-dark: var(--color-blueberry-300); + --color-accent-blueberry-subtle: var(--color-blueberry-800); + --color-accent-blueberry-subtlest: var(--color-blueberry-900); + --color-accent-canteloupe-bold: var(--color-canteloupe-500); + --color-accent-canteloupe-dark: var(--color-canteloupe-300); + --color-accent-canteloupe-subtle: var(--color-canteloupe-800); + --color-accent-canteloupe-subtlest: var(--color-canteloupe-900); + --color-accent-fig-bold: var(--color-fig-500); + --color-accent-fig-dark: var(--color-fig-300); + --color-accent-fig-subtle: var(--color-fig-900); + --color-accent-fig-subtlest: var(--color-fig-800); + --color-accent-grape-bold: var(--color-grape-500); + --color-accent-grape-dark: var(--color-grape-300); + --color-accent-grape-subtle: var(--color-grape-800); + --color-accent-grape-subtlest: var(--color-grape-900); + --color-accent-kale-bold: var(--color-kale-500); + --color-accent-kale-dark: var(--color-kale-300); + --color-accent-kale-subtle: var(--color-kale-800); + --color-accent-kale-subtlest: var(--color-kale-900); + --color-accent-kiwi-bold: var(--color-kiwi-500); + --color-accent-kiwi-dark: var(--color-kiwi-300); + --color-accent-kiwi-subtle: var(--color-kiwi-800); + --color-accent-kiwi-subtlest: var(--color-kiwi-900); + --color-accent-mango-bold: var(--color-mango-500); + --color-accent-mango-dark: var(--color-mango-300); + --color-accent-mango-subtle: var(--color-mango-800); + --color-accent-mango-subtlest: var(--color-mango-900); + --color-accent-persimmon-bold: var(--color-persimmon-500); + --color-accent-persimmon-dark: var(--color-persimmon-300); + --color-accent-persimmon-subtle: var(--color-persimmon-900); + --color-accent-persimmon-subtlest: var(--color-persimmon-800); + --color-accent-plum-bold: var(--color-plum-500); + --color-accent-plum-dark: var(--color-plum-300); + --color-accent-plum-subtle: var(--color-plum-900); + --color-accent-plum-subtlest: var(--color-plum-800); + --color-accent-sand-bold: var(--color-sand-500); + --color-accent-sand-dark: var(--color-sand-300); + --color-accent-sand-subtle: var(--color-sand-900); + --color-accent-sand-subtlest: var(--color-sand-800); + --color-negative-background: var(--color-persimmon-900); + --color-negative-background-bold: var(--color-persimmon-600); + --color-negative-background-bold-dark: var(--color-persimmon-700); + --color-negative-background-bold-light: var(--color-persimmon-500); + --color-negative-border: var(--color-persimmon-600); + --color-negative-border-dark: var(--color-persimmon-400); + --color-negative-border-light: var(--color-persimmon-800); + --color-negative-border-lighter: var(--color-persimmon-700); + --color-negative-border-lightest: var(--color-persimmon-800); + --color-negative-content: var(--color-persimmon-000); + --color-negative-content-bold: var(--color-persimmon-500); + --color-negative-content-bold-subtle: var(--color-persimmon-700); + --color-negative-content-subtle: var(--color-persimmon-100); + --color-negative-emphasis: var(--color-persimmon-900); + --color-negative-emphasis-subtle: var(--color-persimmon-950); + --color-negative-focus-outline: var(--color-persimmon-700); + --color-neutral-background: var(--color-sand-800); + --color-neutral-background-bold: var(--color-sand-900); + --color-neutral-background-bold-dark: var(--color-sand-950); + --color-neutral-background-bold-light: var(--color-sand-800); + --color-neutral-border: var(--color-sand-700); + --color-neutral-border-dark: var(--color-sand-900); + --color-neutral-border-darker: var(--color-sand-900); + --color-neutral-border-darkest: var(--color-sand-950); + --color-neutral-border-light: var(--color-sand-600); + --color-neutral-border-lighter: var(--color-sand-500); + --color-neutral-content: var(--color-sand-300); + --color-neutral-content-subtle: var(--color-sand-400); + --color-neutral-content-subtler: var(--color-sand-500); + --color-neutral-content-subtlest: var(--color-sand-600); + --color-neutral-emphasis: var(--color-sand-900); + --color-neutral-emphasis-subtle: var(--color-neutral-950); + --color-neutral-shadow: var(--color-neutral-950); + --color-neutral-inverted-background: var(--color-sand-000); + --color-neutral-inverted-background-bold: var(--color-sand-200); + --color-neutral-inverted-background-bold-dark: var(--color-sand-300); + --color-neutral-inverted-background-bold-light: var(--color-sand-100); + --color-neutral-inverted-border: var(--color-sand-300); + --color-neutral-inverted-content: var(--color-sand-800); + --color-neutral-inverted-content-subtle: var(--color-sand-500); + --color-neutral-inverted-content-subtler: var(--color-sand-600); + --color-neutral-inverted-content-subtlest: var(--color-sand-700); + --color-positive-background: var(--color-kale-900); + --color-positive-background-bold: var(--color-kale-600); + --color-positive-background-bold-dark: var(--color-kale-700); + --color-positive-background-bold-light: var(--color-kale-500); + --color-positive-border: var(--color-kale-900); + --color-positive-border-dark: var(--color-kale-900); + --color-positive-border-light: var(--color-kale-800); + --color-positive-border-lighter: var(--color-kale-700); + --color-positive-border-lightest: var(--color-kale-600); + --color-positive-content: var(--color-kale-000); + --color-positive-content-bold: var(--color-kale-500); + --color-positive-content-bold-subtle: var(--color-kale-700); + --color-positive-content-subtle: var(--color-kale-100); + --color-positive-emphasis: var(--color-kale-900); + --color-positive-emphasis-subtle: var(--color-kale-950); + --color-positive-focus-outline: var(--color-kale-700); + --color-primary-background: var(--color-grape-950); + --color-primary-background-bold: var(--color-grape-600); + --color-primary-background-bold-dark: var(--color-grape-700); + --color-primary-background-bold-light: var(--color-grape-500); + --color-primary-border: var(--color-grape-600); + --color-primary-border-dark: var(--color-grape-400); + --color-primary-border-light: var(--color-grape-600); + --color-primary-border-lighter: var(--color-grape-700); + --color-primary-border-lightest: var(--color-grape-800); + --color-primary-content: var(--color-grape-000); + --color-primary-content-bold: var(--color-grape-500); + --color-primary-content-bold-subtle: var(--color-grape-700); + --color-primary-content-subtle: var(--color-grape-300); + --color-primary-emphasis: var(--color-grape-900); + --color-primary-emphasis-subtle: var(--color-grape-950); + --color-primary-focus-outline: var(--color-grape-700); + --color-warning-background: var(--color-canteloupe-900); + --color-warning-background-bold: var(--color-canteloupe-600); + --color-warning-background-bold-dark: var(--color-canteloupe-700); + --color-warning-background-bold-light: var(--color-canteloupe-500); + --color-warning-border: var(--color-canteloupe-900); + --color-warning-border-dark: var(--color-canteloupe-900); + --color-warning-border-light: var(--color-canteloupe-800); + --color-warning-border-lighter: var(--color-canteloupe-700); + --color-warning-border-lightest: var(--color-canteloupe-600); + --color-warning-content: var(--color-canteloupe-000); + --color-warning-content-bold: var(--color-canteloupe-500); + --color-warning-content-bold-subtle: var(--color-canteloupe-700); + --color-warning-content-subtle: var(--color-canteloupe-000); + --color-warning-emphasis: var(--color-canteloupe-900); + --color-warning-emphasis-subtle: var(--color-canteloupe-950); + --color-warning-focus-outline: var(--color-canteloupe-700); + } + } From 657eadbcaad9b3bcef99608d28504e098f51a1c4 Mon Sep 17 00:00:00 2001 From: Yousif Yassi Date: Wed, 23 Oct 2024 09:51:17 -0400 Subject: [PATCH 03/66] we have toggle in place --- .../labelstudio/src/components/Form/Form.scss | 1 + .../src/components/Menubar/MenuContent.scss | 1 - .../src/components/Menubar/Menubar.jsx | 5 ++ .../src/components/Menubar/Menubar.scss | 4 ++ .../src/components/Common/Tabs/Tabs.scss | 1 + .../components/MainView/DataView/Table.scss | 1 - web/libs/ui/src/index.ts | 2 + .../MultiStateToggle.module.scss | 19 +++++++ .../lib/MultiStateToggle/MultiStateToggle.tsx | 37 ++++++++++++ .../lib/ThemeToggle/ThemeToggle.module.scss | 24 ++++++++ .../ui/src/lib/ThemeToggle/ThemeToggle.tsx | 57 +++++++++++++++++++ .../ui/src/lib/ThemeToggle/icons/moon.svg | 17 ++++++ web/libs/ui/src/lib/ThemeToggle/icons/sun.svg | 17 ++++++ 13 files changed, 184 insertions(+), 2 deletions(-) create mode 100644 web/libs/ui/src/lib/MultiStateToggle/MultiStateToggle.module.scss create mode 100644 web/libs/ui/src/lib/MultiStateToggle/MultiStateToggle.tsx create mode 100644 web/libs/ui/src/lib/ThemeToggle/ThemeToggle.module.scss create mode 100644 web/libs/ui/src/lib/ThemeToggle/ThemeToggle.tsx create mode 100644 web/libs/ui/src/lib/ThemeToggle/icons/moon.svg create mode 100644 web/libs/ui/src/lib/ThemeToggle/icons/sun.svg diff --git a/web/apps/labelstudio/src/components/Form/Form.scss b/web/apps/labelstudio/src/components/Form/Form.scss index 2b4e10a9d855..5435a2918bf6 100644 --- a/web/apps/labelstudio/src/components/Form/Form.scss +++ b/web/apps/labelstudio/src/components/Form/Form.scss @@ -64,6 +64,7 @@ &:not(&_ghost):focus, &_focused { outline: 4px solid var(--color-primary-focus-outline); + // box-shadow: 0 0 0 6px var(--grape_100), inset 0 -1px 0 rgb(0 0 0 / 10%), inset 0 0 0 1px rgb(0 0 0 / 15%), inset 0 0 0 1px var(--grape_100); border-color: var(--color-neutral-border-dark); } diff --git a/web/apps/labelstudio/src/components/Menubar/MenuContent.scss b/web/apps/labelstudio/src/components/Menubar/MenuContent.scss index fd359ed4e964..e4fc8293dfda 100644 --- a/web/apps/labelstudio/src/components/Menubar/MenuContent.scss +++ b/web/apps/labelstudio/src/components/Menubar/MenuContent.scss @@ -19,7 +19,6 @@ margin-left: 0; height: 100%; background-color: var(--color-neutral-background); - transition: margin var(--menu-animation-duration) var(--menu-animation-curve); will-change: margin-left; transition: background-color 400ms ease-out; diff --git a/web/apps/labelstudio/src/components/Menubar/Menubar.jsx b/web/apps/labelstudio/src/components/Menubar/Menubar.jsx index 74833a7e7f0c..6201b8afd5a2 100644 --- a/web/apps/labelstudio/src/components/Menubar/Menubar.jsx +++ b/web/apps/labelstudio/src/components/Menubar/Menubar.jsx @@ -28,6 +28,7 @@ import "./MenuContent.scss"; import "./MenuSidebar.scss"; import { ModelsPage } from "../../pages/Organization/Models/ModelsPage"; import { FF_DIA_835, isFF } from "../../utils/feature-flags"; +import { ThemeToggle } from "@humansignal/ui"; export const MenubarContext = createContext(); @@ -144,6 +145,10 @@ export const Menubar = ({ enabled, defaultOpened, defaultPinned, children, onSid

+
+ + + void; +} + +export const MultiStateToggle = ({ options = [], selectedOption, onChange }: MultiStateToggleProps) => { + const selectedIndex = useMemo(() => { + return options.findIndex((option: MultiStateToggleOption) => option.value === selectedOption); + }, [options, selectedOption]); + return ( +
+ {options?.map((option, index) => ( + + ))} +
+ ); +}; + +export default MultiStateToggle; diff --git a/web/libs/ui/src/lib/ThemeToggle/ThemeToggle.module.scss b/web/libs/ui/src/lib/ThemeToggle/ThemeToggle.module.scss new file mode 100644 index 000000000000..cbd2fba42a33 --- /dev/null +++ b/web/libs/ui/src/lib/ThemeToggle/ThemeToggle.module.scss @@ -0,0 +1,24 @@ +.themeToggle { + display: flex; + align-items: center; + justify-content: center; + transition: outline 0.1s ease; +} + +.themeOption { + display: flex; + justify-content: center; + align-self: stretch; + + &__label { + display: flex; + height: 100%; + align-items: center; + } + + &__icon { + display: flex; + height: 100%; + align-items: center; + } +} \ No newline at end of file diff --git a/web/libs/ui/src/lib/ThemeToggle/ThemeToggle.tsx b/web/libs/ui/src/lib/ThemeToggle/ThemeToggle.tsx new file mode 100644 index 000000000000..a3cb33143a24 --- /dev/null +++ b/web/libs/ui/src/lib/ThemeToggle/ThemeToggle.tsx @@ -0,0 +1,57 @@ +import { clsx } from "clsx"; +import styles from "./ThemeToggle.module.scss"; +import MultiStateToggle from "../MultiStateToggle/MultiStateToggle"; +import { useEffect, useMemo, useState } from "react"; +import { ReactComponent as Sun } from "./icons/sun.svg"; +import { ReactComponent as Moon } from "./icons/moon.svg"; + +const THEME_OPTIONS = ["Auto", "Light", "Dark"]; +export interface ThemeToggleOption { + label?: string; + icon?: string; +} +const ThemeOption = ({ label, icon }: ThemeToggleOption) => { + return ( +
+
{icon === "Dark" ? : }
+
{label}
+
+ ); +}; +export const ThemeToggle = () => { + const [theme, setTheme] = useState(THEME_OPTIONS[0]); + const systemMode = useMemo( + () => (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "Dark" : "Light"), + [], + ); + const [appliedTheme, setAppliedTheme] = useState(theme === "Auto" ? systemMode : theme); + + useEffect(() => { + if (!appliedTheme) return; + document.documentElement.setAttribute("data-color-scheme", appliedTheme.toLowerCase()); + }, [appliedTheme]); + + const themeChanged = (theme: string) => { + const length = THEME_OPTIONS.length; + const index = (THEME_OPTIONS.indexOf(theme) + 1) % length; + const nextTheme = THEME_OPTIONS[index]; + + setTheme(nextTheme); + setAppliedTheme(nextTheme === "Auto" ? systemMode : nextTheme); + }; + + return ( +
+ ({ + value: option, + label: , + }))} + selectedOption={theme} + onChange={themeChanged} + /> +
+ ); +}; + +export default ThemeToggle; diff --git a/web/libs/ui/src/lib/ThemeToggle/icons/moon.svg b/web/libs/ui/src/lib/ThemeToggle/icons/moon.svg new file mode 100644 index 000000000000..4510eb8c0fcc --- /dev/null +++ b/web/libs/ui/src/lib/ThemeToggle/icons/moon.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/web/libs/ui/src/lib/ThemeToggle/icons/sun.svg b/web/libs/ui/src/lib/ThemeToggle/icons/sun.svg new file mode 100644 index 000000000000..b04a9aee23b0 --- /dev/null +++ b/web/libs/ui/src/lib/ThemeToggle/icons/sun.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + From 560dff555dced1837f1d6d51f4880f5ba98cffd9 Mon Sep 17 00:00:00 2001 From: Yousif Yassi Date: Wed, 23 Oct 2024 09:59:17 -0400 Subject: [PATCH 04/66] we now reserve selection --- web/libs/ui/src/lib/ThemeToggle/ThemeToggle.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/web/libs/ui/src/lib/ThemeToggle/ThemeToggle.tsx b/web/libs/ui/src/lib/ThemeToggle/ThemeToggle.tsx index a3cb33143a24..b14909973f4c 100644 --- a/web/libs/ui/src/lib/ThemeToggle/ThemeToggle.tsx +++ b/web/libs/ui/src/lib/ThemeToggle/ThemeToggle.tsx @@ -6,6 +6,7 @@ import { ReactComponent as Sun } from "./icons/sun.svg"; import { ReactComponent as Moon } from "./icons/moon.svg"; const THEME_OPTIONS = ["Auto", "Light", "Dark"]; +const PREFERRED_COLOR_SCHEME_KEY = "preferred-color-scheme"; export interface ThemeToggleOption { label?: string; icon?: string; @@ -19,12 +20,13 @@ const ThemeOption = ({ label, icon }: ThemeToggleOption) => { ); }; export const ThemeToggle = () => { - const [theme, setTheme] = useState(THEME_OPTIONS[0]); + const presetTheme = window.localStorage.getItem(PREFERRED_COLOR_SCHEME_KEY) ?? THEME_OPTIONS[0]; + const [theme, setTheme] = useState(presetTheme); const systemMode = useMemo( () => (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "Dark" : "Light"), [], ); - const [appliedTheme, setAppliedTheme] = useState(theme === "Auto" ? systemMode : theme); + const [appliedTheme, setAppliedTheme] = useState(presetTheme === "Auto" ? systemMode : presetTheme); useEffect(() => { if (!appliedTheme) return; @@ -36,6 +38,7 @@ export const ThemeToggle = () => { const index = (THEME_OPTIONS.indexOf(theme) + 1) % length; const nextTheme = THEME_OPTIONS[index]; + window.localStorage.setItem(PREFERRED_COLOR_SCHEME_KEY, nextTheme); setTheme(nextTheme); setAppliedTheme(nextTheme === "Auto" ? systemMode : nextTheme); }; From 1781c04c4ab56683515dfb27a1ab5e39d78d8f4c Mon Sep 17 00:00:00 2001 From: Ricardo Cabral Date: Mon, 21 Oct 2024 17:11:23 -0400 Subject: [PATCH 05/66] Adds correct background color to pagination. --- .../labelstudio/src/pages/Projects/Projects.scss | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/web/apps/labelstudio/src/pages/Projects/Projects.scss b/web/apps/labelstudio/src/pages/Projects/Projects.scss index d7386ac75f04..0ed14a14f8c0 100644 --- a/web/apps/labelstudio/src/pages/Projects/Projects.scss +++ b/web/apps/labelstudio/src/pages/Projects/Projects.scss @@ -20,18 +20,18 @@ } &__link { - color: #000; + color: var(--color-neutral-content); display: block; display: flex; text-decoration: none; &:hover { - color: #000; + color: var(--color-neutral-content); } } &__pages { - background-color: var(--sand_0); + background-color: var(--color-neutral-background); bottom: 0; width: 100%; position: sticky; @@ -75,12 +75,12 @@ font-size: 32px; font-weight: 700; margin: 16px; - color: var(--sand_900); + color: var(--color-neutral-content); } p { font-size: 1.25rem; - color: var(--sand_700); + color: var(--color-neutral-subtle); margin: 0; } @@ -162,7 +162,7 @@ grid-auto-columns: max-content; &-item { - --icon-color: var(--sand_0); + --icon-color: var(--color-neutral-background); display: flex; align-items: center; From 8d2a9ef6ccaea3d300ff8b3b4bf6e6caacb4cc8e Mon Sep 17 00:00:00 2001 From: Ricardo Cabral Date: Wed, 23 Oct 2024 10:13:10 -0400 Subject: [PATCH 06/66] Refactored heidi-speaking so that the speech bubble spike can be colored --- .../src/assets/images/heidi-speaking.svg | 78 +++++++++---------- 1 file changed, 38 insertions(+), 40 deletions(-) diff --git a/web/apps/labelstudio/src/assets/images/heidi-speaking.svg b/web/apps/labelstudio/src/assets/images/heidi-speaking.svg index 20bd0ea763cb..9e6d5030ebb4 100644 --- a/web/apps/labelstudio/src/assets/images/heidi-speaking.svg +++ b/web/apps/labelstudio/src/assets/images/heidi-speaking.svg @@ -1,42 +1,40 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From bfcc0aa0224ef79281f23573a4c7fa3e5f8264c7 Mon Sep 17 00:00:00 2001 From: Ricardo Cabral Date: Wed, 23 Oct 2024 10:18:01 -0400 Subject: [PATCH 07/66] Added semantic tokens to Enterprise badge --- .../labelstudio/src/components/Badges/Enterprise.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/web/apps/labelstudio/src/components/Badges/Enterprise.scss b/web/apps/labelstudio/src/components/Badges/Enterprise.scss index c13e02729f95..25042e82e593 100644 --- a/web/apps/labelstudio/src/components/Badges/Enterprise.scss +++ b/web/apps/labelstudio/src/components/Badges/Enterprise.scss @@ -8,8 +8,8 @@ &__label { margin: 1px; - background: var(--persimmon_0); - color: var(--persimmon_400); + background: var(--color-negative-background); + color: var(--color-negative-content-subtle); border-radius: 3px; font-size: 11px; padding: 2px 5px 2px 3px; @@ -22,10 +22,10 @@ &_filled &__label { background: none; - color: var(--persimmon_0); + color: var(--color-negative-background); } &_filled &__icon path { - fill: var(--persimmon_0); + fill: var(--color-negative-background); } } \ No newline at end of file From d20b6768d84218e40816072656d29b0dcac6e82d Mon Sep 17 00:00:00 2001 From: Ricardo Cabral Date: Wed, 23 Oct 2024 10:30:02 -0400 Subject: [PATCH 08/66] Fixes token naming for Breadcrumbs --- .../labelstudio/src/components/Breadcrumbs/Breadcrumbs.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web/apps/labelstudio/src/components/Breadcrumbs/Breadcrumbs.scss b/web/apps/labelstudio/src/components/Breadcrumbs/Breadcrumbs.scss index 2d5bcd7ab45a..8bb7c1292ed6 100644 --- a/web/apps/labelstudio/src/components/Breadcrumbs/Breadcrumbs.scss +++ b/web/apps/labelstudio/src/components/Breadcrumbs/Breadcrumbs.scss @@ -49,7 +49,7 @@ color: var(--color-neutral-content-subtler); &:hover { - color: var(--color-primary-content-bold-subtle); + color: var(--color-primary-content); } } } @@ -75,7 +75,7 @@ color: var(--color-neutral-content) ; a { - color: var(--color-primary-content-bold); + color: var(--color-primary-surface-content); } } From 685e7c22b0bc6b525e190f3958acabf2e68d74db Mon Sep 17 00:00:00 2001 From: Ricardo Cabral Date: Wed, 23 Oct 2024 16:05:23 -0400 Subject: [PATCH 09/66] Updated nomenclature. --- label_studio/core/static/css/login.css | 38 +- label_studio/core/static/css/main.css | 2 +- label_studio/core/static/css/uikit.css | 8 +- label_studio/core/static/css/users.css | 1 + .../src/components/Button/Button.scss | 32 +- .../components/Description/Description.scss | 2 +- .../src/components/EmptyState/EmptyState.scss | 11 +- .../src/components/Error/Error.scss | 2 +- .../Form/Elements/Counter/Counter.scss | 21 +- .../components/Form/Elements/Input/Input.scss | 12 +- .../components/Form/Elements/Label/Label.scss | 2 +- .../Form/Elements/RadioGroup/RadioGroup.scss | 25 +- .../Form/Elements/Select/Select.scss | 8 +- .../Form/Elements/Toggle/Toggle.scss | 16 +- .../labelstudio/src/components/Form/Form.scss | 7 +- .../Form/Validation/Validation.scss | 7 +- .../src/components/HeidiTips/HeidiTip.scss | 28 +- .../labelstudio/src/components/Menu/Menu.scss | 14 +- .../src/components/Menubar/Menubar.scss | 2 +- .../src/components/Modal/Modal.scss | 9 +- .../src/components/Pagination/Pagination.scss | 6 +- .../src/components/Toast/MessageToast.scss | 2 +- .../src/components/Userpic/Userpic.scss | 11 +- .../pages/CreateProject/Config/Config.scss | 22 +- .../pages/CreateProject/Import/Import.scss | 6 +- .../Organization/PeoplePage/PeopleList.scss | 6 +- .../Organization/PeoplePage/SelectedUser.scss | 15 +- .../src/pages/Projects/Projects.scss | 8 +- .../src/pages/Settings/settings.scss | 4 +- .../src/pages/WebhookPage/WebhookPage.scss | 4 +- .../src/components/Common/Modal/Modal.scss | 8 +- .../src/components/Common/Table/Table.scss | 2 +- .../src/components/Common/Tabs/Tabs.scss | 8 +- .../src/components/Label/Label.scss | 2 +- web/libs/editor/src/common/Modal/Modal.scss | 2 +- web/libs/editor/src/components/App/App.scss | 2 +- .../editor/src/components/TopBar/TopBar.scss | 4 +- .../TextAreaRegion/TextAreaRegion.scss | 4 +- web/libs/ui/src/tokens/colors.scss | 554 +++++++++--------- 39 files changed, 503 insertions(+), 414 deletions(-) diff --git a/label_studio/core/static/css/login.css b/label_studio/core/static/css/login.css index 015e4bf8989b..2cf45d18b311 100644 --- a/label_studio/core/static/css/login.css +++ b/label_studio/core/static/css/login.css @@ -7,6 +7,8 @@ html, body { font-weight: 400; height: 100%; font-family: 'Hellix', sans-serif; + background-color: var(--color-neutral-background-bold); + color: var(--color-neutral-content); } .login_page_new_ui .left { @@ -60,12 +62,16 @@ html, body { line-height: 28px; } +.login_page_new_ui .left img { + color: var(--color-neutral-content); +} + .login_page_new_ui .tips { max-width: 520px; border-radius: 8px; border: 1px solid var(--sand_300); - background: var(--sand_0); - box-shadow: 0 2px 6px 0 var(--sand_300); + background: var(--color-neutral-surface); + box-shadow: 0 2px 6px 0 rgb(var(--color-neutral-shadow) / 20%); padding: 16px; margin:18vh 60px 0 60px; position: relative; @@ -100,7 +106,7 @@ html, body { } .login_page_new_ui .tips .description a { - color: var(--primary_link); + color: var(--color-primary-content); font-size: .875rem; font-style: normal; font-weight: 500; @@ -134,22 +140,23 @@ html, body { text-align: center; padding: .75rem 0; font-size: 1rem; - color: var(--sand_500); + color: var(--color-neutral-border); border-top: 2px solid transparent; + transition: all 150ms ease-out; } .login_page_new_ui .toggle > *.active { - border-color: var(--primary_link); - color: var(--primary_link); + border-color: var(--color-primary-surface); + color: var(--color-primary-content); } .login_page_new_ui .toggle > *:hover { - color: var(--grape_700); - border-color: var(--grape_700); + color: var(--color-primary-surface-hover); + border-color: var(--color-primary-surface-hover); } .form-wrapper{ position: relative; - background: #FDFDFC; + background: var(--color-neutral-surface); margin-top: 1.5rem; - border: 1px solid #E1DED5; + border: 1px solid var(--color-neutral-border); padding: 2rem; border-radius: 1rem; box-shadow: 0px 0px 12px rgba(23, 20, 13, 0.16); @@ -177,7 +184,7 @@ html, body { margin: 0; } .login_page_new_ui form .error { - color: var(--red_7); + color: var(--color-negative-content); font-size: .875rem; } .login_page_new_ui form input, @@ -188,7 +195,8 @@ html, body { .login_page_new_ui form button { border-radius: 4rem; - background: var(--sand_900); + background: var(--color-neutral-inverted-surface); + color: var(--color-neutral-inverted-content); } .login_page_new_ui .field_errors { @@ -198,7 +206,7 @@ html, body { text-align: left; font-size: .875rem; line-height: 16px; - color: var(--red_7); + color: var(--color-negative-content); } .login_page_new_ui .field_errors li { margin-top: .25rem; @@ -213,10 +221,10 @@ html, body { .auto-generated form input { height: 40px; min-height: 40px; - background: var(--sand_0); + background: var(--color-neutral-surface); font-size: 1rem; line-height: 22px; - border: 1px solid var(--sand_300); + border: 1px solid var(--color-neutral-border); box-sizing: border-box; border-radius: 5px; padding: 0 16px; diff --git a/label_studio/core/static/css/main.css b/label_studio/core/static/css/main.css index a176f97e77be..4c7c2f3235ae 100644 --- a/label_studio/core/static/css/main.css +++ b/label_studio/core/static/css/main.css @@ -54,7 +54,7 @@ body { h1, h2, h3, h4, h5, h6 { font-weight: normal; - color: var(--sand_900); + color: var(--color-neutral-content); } a { text-decoration: none; diff --git a/label_studio/core/static/css/uikit.css b/label_studio/core/static/css/uikit.css index fef5242f2292..ee59cf0c9c3d 100644 --- a/label_studio/core/static/css/uikit.css +++ b/label_studio/core/static/css/uikit.css @@ -1,6 +1,6 @@ body { - --border-color: rgba(0, 0, 0, 0.15); - --color-error: #d00; + --border-color: varf(--color-neutral-border); + --color-error: var(--color-negative-content); } .full_content { @@ -63,8 +63,8 @@ textarea { } input[type=text][disabled] { - background: rgba(0, 0, 0, 0.03); - color: rgba(0, 0, 0, 0.4) + background: var(--color-neutral-surface); + color: var(--color-neutral-content-subtlest); } a.button, diff --git a/label_studio/core/static/css/users.css b/label_studio/core/static/css/users.css index e3520068a769..bf239074f840 100644 --- a/label_studio/core/static/css/users.css +++ b/label_studio/core/static/css/users.css @@ -3,6 +3,7 @@ body { --border-color: var(--color-neutral-border); --color-error: var(--color-negative-content-bold); + color: var(--color-neutral-content); } .account-page { display: grid; diff --git a/web/apps/labelstudio/src/components/Button/Button.scss b/web/apps/labelstudio/src/components/Button/Button.scss index 8b22262518f8..bd80b7cfe3f8 100644 --- a/web/apps/labelstudio/src/components/Button/Button.scss +++ b/web/apps/labelstudio/src/components/Button/Button.scss @@ -1,6 +1,6 @@ .button-ls { --button-color: var(--color-neutral-content); - --button-background-color: var(--color-neutral-background-bold-light); + --button-background-color: var(--color-neutral-surface-hover); --button-background-image: none; --button-shadow: inset 0px -1px 0px rgb(0 0 0 / 10%), inset 0px 0px 0px 1px rgb(0 0 0 / 15%); --button-content-align: center; @@ -49,7 +49,7 @@ &:hover:not(:disabled, .button-ls_waiting, .button-ls_look_danger, .button-ls_look_primary) { --button-color: var(--color-neutral-content); - --button-background-color: var(--color-neutral-background-bold); + --button-background-color: var(--color-neutral-surface); } &:active { @@ -66,17 +66,17 @@ &_waiting, &:disabled, &_disabled { - --button-color: var(--sand_500); - --button-background-color: var(--sand_200); + --button-color: var(--color-neutral-content-subtlest); + --button-background-color: var(--color-neutral-background); --button-events: none; border: none; & svg { - color: var(--sand_500) !important; + color: var(--color-neutral-content-subtlest) !important; & path { - stroke: var(--sand_500); + stroke: var(--color-neutral-content-subtlest); } } } @@ -145,17 +145,17 @@ &_look { &_primary { - --button-color: var(--color-primary-content); - --button-background-color: var(--color-primary-background-bold); + --button-color: var(--color-primary-surface-content); + --button-background-color: var(--color-primary-surface); --button-border: none; &:hover:not(:disabled, .button-ls_waiting) { - --button-background-color: var(--grape_700); - --button-color: var(--sand_0); + --button-background-color: var(--color-primary-surface-hover); + --button-color: var(--color-primary-surface-content); } &:active:not(:disabled) { - --button-background-color: var(--primary_link); + --button-background-color: var(--color-primary-content); } &:focus:not(:disabled) { @@ -164,19 +164,19 @@ } &_danger { - --button-color: var(--danger_color); + --button-color: var(--color-negative-content); &:hover:not(:disabled, &_waiting) { - --button-color: var(--danger_color); + --button-color: var(--color-negative-content); - border-color: var(--danger_color); - background: var(--red_1); + border-color: var(--color-negative-border); + background: var(--color-negative-emphasis-subtle); } } &_destructive { --button-color: var(--sand_0); - --button-background-color: var(--danger_color); + --button-background-color: var(--color-negative-surface); &:hover:not(:disabled, .button-ls_waiting) { --button-color: var(--danger_color); diff --git a/web/apps/labelstudio/src/components/Description/Description.scss b/web/apps/labelstudio/src/components/Description/Description.scss index a4a23e949a35..b2b673f122ff 100644 --- a/web/apps/labelstudio/src/components/Description/Description.scss +++ b/web/apps/labelstudio/src/components/Description/Description.scss @@ -3,7 +3,7 @@ line-height: 140%; & a { - color: var(--color-primary-content-bold); + color: var(--color-primary-surface-content); text-decoration: underline; &:hover { diff --git a/web/apps/labelstudio/src/components/EmptyState/EmptyState.scss b/web/apps/labelstudio/src/components/EmptyState/EmptyState.scss index 364322aaccec..9d323aef8f0a 100644 --- a/web/apps/labelstudio/src/components/EmptyState/EmptyState.scss +++ b/web/apps/labelstudio/src/components/EmptyState/EmptyState.scss @@ -1,7 +1,7 @@ .empty-state-default { max-width: 40rem; background: var(--color-primary-background); - border: 1px solid var(--color-primary-border); + border: 1px solid var(--color-primary-border-subtlest); padding: 2rem; border-radius: 0.5rem; display: flex; @@ -11,13 +11,13 @@ &__icon { margin-bottom: 0.75rem; - background: var(--color-primary-background); + background: var(--color-primary-emphasis); padding: 0.5rem; display: flex; border-radius: 2rem; & svg path { - fill: var(--color-primary-content-bold); + fill: var(--color-primary-icon); } } @@ -28,13 +28,14 @@ &__title { font-size: 1.75rem; font-weight: 500; - color: var(--color-primary-content-bold); + color: var(--color-primary-content); margin-bottom: 1rem; + text-align: center; } &__description { font-size: 1rem; - color: var(--color-primary-content-bold-subtle); + color: var(--color-neutral-content-subtle); margin-bottom: 1rem; text-align: center; line-height: 1.5em; diff --git a/web/apps/labelstudio/src/components/Error/Error.scss b/web/apps/labelstudio/src/components/Error/Error.scss index 50bf36a95778..960652115a65 100644 --- a/web/apps/labelstudio/src/components/Error/Error.scss +++ b/web/apps/labelstudio/src/components/Error/Error.scss @@ -24,7 +24,7 @@ &__detail { font-size: 24px; font-weight: bold; - color: var(--color-negative-content-bold); + color: var(--color-negative-content); margin: 16px 0; white-space: pre-line; word-break: break-word; diff --git a/web/apps/labelstudio/src/components/Form/Elements/Counter/Counter.scss b/web/apps/labelstudio/src/components/Form/Elements/Counter/Counter.scss index f3c7c42e65ef..1180daba9d96 100644 --- a/web/apps/labelstudio/src/components/Form/Elements/Counter/Counter.scss +++ b/web/apps/labelstudio/src/components/Form/Elements/Counter/Counter.scss @@ -4,14 +4,14 @@ display: flex; min-width: 114px; border-radius: 8px; - background: var(--sand_100); + background: var(--color-neutral-surface); box-sizing: border-box; - box-shadow: 0 0 0 1px var(--sand_300) inset; + box-shadow: 0 0 0 1px var(--color-neutral-border) inset; transition: box-shadow 80ms ease; &_disabled { opacity: 0.6; - background-color: var(--sand_200); + background-color: var(--color-neutral-background); } &__btn { @@ -19,31 +19,31 @@ min-height: 32px; margin: 4px; border-radius: 4px; - background: var(--sand_0); + background: var(--color-neutral-background); display: flex; - color: var(--primary_link); + color: var(--color-primary-surface-content); border: none; outline: none; align-items: center; justify-content: center; transition: all 80ms ease; - box-shadow: 0 1px 0 var(--sand_200), 0 0 0 1px var(--sand_100), 0 5px 10px var(--sand_300); + box-shadow: 0 1px 0 var(--color-neutral-shadow), 0 0 0 1px var(--color-neutral-shadow), 0 5px 10px var(--color-neutral-shadow); &_disabled { box-shadow: none; background: none; pointer-events: none; - color: var(--sand_500); + color: var(--color-content-subtlest); } &:active { - background: var(--sand_0); - box-shadow: 0 1px 0 var(--sand_200), 0 0 0 1px var(--sand_100), 0 5px 10px var(--sand_300); + background: var(--color-neutral-background); + box-shadow: 0 1px 0 var(--color-neutral-shadow), 0 0 0 1px var(--color-neutral-shadow), 0 5px 10px var(--color-neutral-shadow); } &:active, &:hover { - color: var(--grape_700); + color: var(--color-primary-surface-content); } } @@ -57,5 +57,6 @@ outline: none; font-size: 16px; line-height: 22px; + color: var(--color-neutral-content); } } \ No newline at end of file diff --git a/web/apps/labelstudio/src/components/Form/Elements/Input/Input.scss b/web/apps/labelstudio/src/components/Form/Elements/Input/Input.scss index ae5d808447aa..5a125286d877 100644 --- a/web/apps/labelstudio/src/components/Form/Elements/Input/Input.scss +++ b/web/apps/labelstudio/src/components/Form/Elements/Input/Input.scss @@ -3,24 +3,28 @@ .textarea-ls { height: 40px; min-height: 40px; - background: var(--color-neutral-background-bold); + background: var(--color-neutral-surface); font-size: 16px; line-height: 22px; border: 1px solid var(--color-neutral-border); box-sizing: border-box; border-radius: 5px; padding: 0 16px; - transition: box-shadow 150ms ease-out; + transition: all 150ms ease-out; font-weight: 400; color: var(--color-neutral-content); &::placeholder { - color: var(--color-neutral-content-subtle); + color: var(--color-neutral-content-subtler); + } + + &:hover:not(.disabled):not([disabled]) { + border-color: var(--color-neutral-border-bolder); } &:active { - border-color: var(--color-neutral-border-dark); + border-color: var(--color-neutral-border-boldest); } &_ghost { diff --git a/web/apps/labelstudio/src/components/Form/Elements/Label/Label.scss b/web/apps/labelstudio/src/components/Form/Elements/Label/Label.scss index de572ae2994e..a044c120d80b 100644 --- a/web/apps/labelstudio/src/components/Form/Elements/Label/Label.scss +++ b/web/apps/labelstudio/src/components/Form/Elements/Label/Label.scss @@ -17,7 +17,7 @@ line-height: 140%; a { - color: var(--grape_500); + color: var(--color-primary-surface-content); text-decoration: underline; &:hover { diff --git a/web/apps/labelstudio/src/components/Form/Elements/RadioGroup/RadioGroup.scss b/web/apps/labelstudio/src/components/Form/Elements/RadioGroup/RadioGroup.scss index e9de45fcced1..96550cff566b 100644 --- a/web/apps/labelstudio/src/components/Form/Elements/RadioGroup/RadioGroup.scss +++ b/web/apps/labelstudio/src/components/Form/Elements/RadioGroup/RadioGroup.scss @@ -7,8 +7,8 @@ border-radius: var(--radius); padding: var(--padding); - background: var(--sand_100); - border: 1px solid var(--sand_300); + background: var(--color-neutral-surface); + border: 1px solid var(--color-neutral-border); box-sizing: border-box; &__buttons { @@ -38,9 +38,9 @@ &::before { content: ''; - background: var(--sand_0); + background: var(--color-neutral-background); border-radius: 100%; - border: 1px solid var(--sand_300); + border: 1px solid var(--color-neutral-border); display: inline-block; width: 1.4em; height: 1.4em; @@ -50,7 +50,16 @@ vertical-align: top; cursor: pointer; text-align: center; - transition: all 200ms ease; + transition: all 300ms ease-out; + box-shadow: inset 0 0 0 8px var(--color-neutral-background); + } + + + + &:hover { + &::before { + border-color: var(--color-neutral-border-bolder); + } } } @@ -74,13 +83,13 @@ &_checked { opacity: 1; - background-color: var(--sand_0); + background-color: var(--color-neutral-surface-hover); box-shadow: var(--button-checked-shadow); & .label-ls__text { &::before { - background-color: var(--sand_0); - box-shadow: inset 0 0 0 4px var(--grape_500); + background-color: var(--color-primary-surface); + box-shadow: inset 0 0 0 4px var(--color-neutral-background); } } } diff --git a/web/apps/labelstudio/src/components/Form/Elements/Select/Select.scss b/web/apps/labelstudio/src/components/Form/Elements/Select/Select.scss index 075251e0ace3..542ae093db3c 100644 --- a/web/apps/labelstudio/src/components/Form/Elements/Select/Select.scss +++ b/web/apps/labelstudio/src/components/Form/Elements/Select/Select.scss @@ -25,14 +25,14 @@ padding: 0 5px; } - &:hover { - border: 1px solid var(--sand_300); + &:hover:not([disabled]) { + border: 1px solid var(--color-neutral-border-boldest); } } } select:disabled { - background: var(--sand_200); - color: var(--sand_500); + background: var(--color-neutral-background); + color: var(--color-neutral-content-subtlest); opacity: 1; } diff --git a/web/apps/labelstudio/src/components/Form/Elements/Toggle/Toggle.scss b/web/apps/labelstudio/src/components/Form/Elements/Toggle/Toggle.scss index ec99e1759727..2d492cab593e 100644 --- a/web/apps/labelstudio/src/components/Form/Elements/Toggle/Toggle.scss +++ b/web/apps/labelstudio/src/components/Form/Elements/Toggle/Toggle.scss @@ -8,8 +8,8 @@ position: relative; cursor: pointer; transition: box-shadow 80ms ease; - background: var(--sand_0); - border: 1px solid var(--sand_300); + background: var(--color-neutral-surface); + border: 1px solid var(--color-neutral-border); &__input { top: 0; @@ -32,11 +32,11 @@ &::before { content: ""; - width: 16px; - height: 16px; + width: 10px; + height: 10px; border-radius: 100%; transition: all 120ms ease; - background: var(--sand_400); + background: var(--color-neutral-content-subtle); box-shadow: 0 5px 10px rgb(18 17 13 / 15%), inset 0 -1px 0 rgb(18 17 13 / 10%), inset 0 0 0 1px rgb(18 17 13 / 5%); } } @@ -47,8 +47,8 @@ &::before { width: 16px; height: 16px; - background: var(--primary_link); - box-shadow: 0 5px 10px var(--grape_100), inset 0 -1px 0 rgb(0 0 0 / 10%); + background: var(--color-primary-surface); + box-shadow: 0 5px 10px var(--color-primary-shadow), inset 0 -1px 0 rgba(var(--color-primary-shadow) / 10%); } } @@ -57,7 +57,7 @@ } &_disabled &__indicator::before { - background-color: var(--sand_100); + background-color: var(--color-neutral-content-subtlest); box-shadow: none; transition: none; } diff --git a/web/apps/labelstudio/src/components/Form/Form.scss b/web/apps/labelstudio/src/components/Form/Form.scss index 5435a2918bf6..36b237f29a20 100644 --- a/web/apps/labelstudio/src/components/Form/Form.scss +++ b/web/apps/labelstudio/src/components/Form/Form.scss @@ -38,12 +38,12 @@ &__info { display: flex; align-items: center; - color: var(--danger_color); + color: var(--color-negative-content); font-size: 14px; line-height: 22px; &_valid { - color: var(--sand_600); + color: var(--color-neutral-content-subtler); } } @@ -60,13 +60,14 @@ .select-ls__list { transition: all 100ms ease-out; outline: 0; + color: var(--color-neutral-content); &:not(&_ghost):focus, &_focused { outline: 4px solid var(--color-primary-focus-outline); // box-shadow: 0 0 0 6px var(--grape_100), inset 0 -1px 0 rgb(0 0 0 / 10%), inset 0 0 0 1px rgb(0 0 0 / 15%), inset 0 0 0 1px var(--grape_100); - border-color: var(--color-neutral-border-dark); + border-color: var(--color-neutral-border-boldest); } } diff --git a/web/apps/labelstudio/src/components/Form/Validation/Validation.scss b/web/apps/labelstudio/src/components/Form/Validation/Validation.scss index b03c118487c4..d0604ee60efd 100644 --- a/web/apps/labelstudio/src/components/Form/Validation/Validation.scss +++ b/web/apps/labelstudio/src/components/Form/Validation/Validation.scss @@ -4,8 +4,9 @@ &__group { padding: 7px 14px; border-radius: 5px; - background-color: var(--red_1); - color: var(--danger_color); + background-color: var(--color-negative-background); + color: var(--color-negative-content); + border: 1px solid var(--color-negative-border-lighter); & + & { margin-top: 5px; @@ -23,6 +24,6 @@ &__message { font-size: 12px; - color: var(--sand_700); + color: var(--color-neutral-content); } } \ No newline at end of file diff --git a/web/apps/labelstudio/src/components/HeidiTips/HeidiTip.scss b/web/apps/labelstudio/src/components/HeidiTips/HeidiTip.scss index 8c96b494a04b..3d2e3433ac4e 100644 --- a/web/apps/labelstudio/src/components/HeidiTips/HeidiTip.scss +++ b/web/apps/labelstudio/src/components/HeidiTips/HeidiTip.scss @@ -6,7 +6,7 @@ border-radius: 8px; box-shadow: 0 2px 6px 0 rgb(0 0 0 / 10%); box-sizing: border-box; - background: var(--color-neutral-background-bold); + background: var(--color-neutral-surface); } &__header { @@ -33,8 +33,9 @@ } &__link { - color: var(--color-primary-content-bold); + color: var(--color-primary-content); font-weight: 500; + display: block; &:hover { text-decoration: underline; @@ -58,6 +59,17 @@ svg { width: 14px; height: 14px; + + + .spike-fill { + fill: var(--color-neutral-surface); + display: none; + } + + .spike-stroke { + fill: var(--color-neutral-border); + display: none; + } } svg > path { @@ -67,8 +79,8 @@ &:hover { background: var(--color-primary-emphasis-subtle); - svg > path { - stroke: var(--color-primary-content-bold); + svg path { + stroke: var(--color-primary-surface-content); } } } @@ -77,5 +89,13 @@ margin-top: -12px; padding-left: 16px; pointer-events: none; + color: var(--color-neutral-border); + + svg { + path.spike-stroke { + color: red; + } + + } } } \ No newline at end of file diff --git a/web/apps/labelstudio/src/components/Menu/Menu.scss b/web/apps/labelstudio/src/components/Menu/Menu.scss index 8a4fb3a163db..914556615377 100644 --- a/web/apps/labelstudio/src/components/Menu/Menu.scss +++ b/web/apps/labelstudio/src/components/Menu/Menu.scss @@ -37,8 +37,8 @@ } &-beta { - background-color: var(--plum_500); - color: var(--plum_0); + background-color: var(--color-accent-plum-bold); + color: var(--color-accent-plum-subtlest); font-size: 12px; font-style: normal; font-weight: 500; @@ -50,7 +50,7 @@ &_look { &_danger { - color: var(--color-negative-content-bold); + color: var(--color-negative-content); } } @@ -80,10 +80,10 @@ } &_dangerous { - color: var(--color-negative-content-bold); + color: var(--color-negative-content); &:hover { - color: var(--color-negative-content-bold) !important; + color: var(--color-negative-content) !important; background-color: var(--color-negative-emphasis-subtle) !important; } } @@ -143,10 +143,10 @@ } &_dangerous { - color: var(--color-negative-content-bold); + color: var(--color-negative-content); &:hover { - color: var(--color-negative-content-bold); + color: var(--color-negative-content); background-color: var(--color-negative-emphasis-subtle); } } diff --git a/web/apps/labelstudio/src/components/Menubar/Menubar.scss b/web/apps/labelstudio/src/components/Menubar/Menubar.scss index 43c7f3829cff..612d4bd744c6 100644 --- a/web/apps/labelstudio/src/components/Menubar/Menubar.scss +++ b/web/apps/labelstudio/src/components/Menubar/Menubar.scss @@ -50,7 +50,7 @@ transition: all 150ms ease-out; &:hover { - background-color: var(--color-neutral-background-bold); + background-color: var(--color-neutral-surface); } } diff --git a/web/apps/labelstudio/src/components/Modal/Modal.scss b/web/apps/labelstudio/src/components/Modal/Modal.scss index b93b48dbe996..50be3f81d874 100644 --- a/web/apps/labelstudio/src/components/Modal/Modal.scss +++ b/web/apps/labelstudio/src/components/Modal/Modal.scss @@ -79,24 +79,25 @@ text-align: center; font-size: 14px; line-height: 22px; + color: var(--color-neutral-content-subtle); & a { - color: var(--color-primary-content-bold); + color: var(--color-primary-surface-content); text-decoration: underline; &:hover { - color: var(--color-primary-content-bold-light); + color: var(--color-primary-surface-content-light); } } &:not(.modal__footer_bare) { - background: var(--color-neutral-background-bold); + background: var(--color-neutral-surface); box-shadow: inset 0 1px 0 var(--color-neutral-border); } } &__close { - --button-color: var(--primary_link); + --button-color: var(--color-primary-surface-content); border: none; diff --git a/web/apps/labelstudio/src/components/Pagination/Pagination.scss b/web/apps/labelstudio/src/components/Pagination/Pagination.scss index 83fe89e9e37e..d29752306846 100644 --- a/web/apps/labelstudio/src/components/Pagination/Pagination.scss +++ b/web/apps/labelstudio/src/components/Pagination/Pagination.scss @@ -6,9 +6,9 @@ --button-color: var(--primary_link); &_disabled { - --button-color: var(--sand_500); + --button-color: var(--color-neutral-content-subtlest); - background-color: var(--sand_200); + background-color: var(--color-neutral-surface); pointer-events: none; } @@ -16,7 +16,7 @@ padding-right: 16px; font-size: 16px; line-height: 19px; - color: rgb(0 0 0 / 40%); + color: var(--color-neutral-content-subtler); } &__navigation { diff --git a/web/apps/labelstudio/src/components/Toast/MessageToast.scss b/web/apps/labelstudio/src/components/Toast/MessageToast.scss index 40497aede262..8940bd5ad62e 100644 --- a/web/apps/labelstudio/src/components/Toast/MessageToast.scss +++ b/web/apps/labelstudio/src/components/Toast/MessageToast.scss @@ -3,7 +3,7 @@ &_info { --background-color: var(--color-neutral-inverted-background); - --hover-background-color: var(--color-neutral-inverted-background-bold-light); + --hover-background-color: var(--color-neutral-inverted-surface-hover); } &_error { diff --git a/web/apps/labelstudio/src/components/Userpic/Userpic.scss b/web/apps/labelstudio/src/components/Userpic/Userpic.scss index 1a6c97a5ed8b..1db6a97e5ff5 100644 --- a/web/apps/labelstudio/src/components/Userpic/Userpic.scss +++ b/web/apps/labelstudio/src/components/Userpic/Userpic.scss @@ -7,15 +7,17 @@ position: relative; align-items: center; border-radius: 100%; - color: var(--color-neutral-content); justify-content: center; - background-color: var(--color-neutral-background-bold); + background-color: var(--color-neutral-surface); box-shadow: inset 0 0 0 1px var(--color-neutral-border); transition: all 150ms ease-out; + color: var(--color-neutral-content-subtler); &:hover { - background-color: var(--color-primary-emphasis-light); - border-color: var(--color-primary-border-light); + background-color: var(--color-primary-emphasis); + box-shadow: inset 0 0 0 1px var(--color-primary-border-subtle); + color: var(--color-neutral-content); + } img { @@ -32,6 +34,5 @@ display: block; line-height: 22px; font-weight: bold; - opacity: 0.4; } } \ No newline at end of file diff --git a/web/apps/labelstudio/src/pages/CreateProject/Config/Config.scss b/web/apps/labelstudio/src/pages/CreateProject/Config/Config.scss index 2c59228c37ff..8271e1c69d2d 100644 --- a/web/apps/labelstudio/src/pages/CreateProject/Config/Config.scss +++ b/web/apps/labelstudio/src/pages/CreateProject/Config/Config.scss @@ -4,7 +4,7 @@ $scroll-width: 5px; &::-webkit-scrollbar { width: 6px; height: 6px; - background-color: var(--sand_100); + background-color: var(--color-neutral-border-boldest); } &::-webkit-scrollbar-thumb { @@ -211,6 +211,7 @@ $scroll-width: 5px; font-size: 1.75rem; width: 100%; display: flex; + color: var(--color-neutral-content); } .wizard h1 a[name="config"] { @@ -286,7 +287,7 @@ $scroll-width: 5px; .wizard .configure__visual { > * { - border-top: 1px solid var(--sand_300); + border-top: 1px solid var(--color-neutral-border); padding-top: 16px; margin-bottom: 16px; } @@ -295,16 +296,18 @@ $scroll-width: 5px; .wizard .configure__object { h4 { margin-bottom: 8px; + color: var(--color-neutral-content); } > p { line-height: 32px; + color: var(--color-neutral-content-subtler); } > p.configure__object-error { line-height: 22px; margin-top: 8px; - color: var(--red_10); + color: var(--color-negative-content); } input { @@ -341,6 +344,10 @@ $scroll-width: 5px; align-items: flex-start; flex: 1; + span { + color: var(--color-neutral-content-subtler); + } + textarea { flex-grow: 1; margin: 8px 0; @@ -352,6 +359,7 @@ $scroll-width: 5px; .wizard .configure__visual h4 { margin: 0; font-weight: 500; + color: var(--color-neutral-content); } /*** Configure Labels ***/ @@ -365,6 +373,7 @@ $scroll-width: 5px; h3 { font-size: 16px; margin: 0 32px 7px; + color: var(--color-neutral-content); } } @@ -492,6 +501,7 @@ $scroll-width: 5px; label { cursor: pointer; + color: var(--color-neutral-content-subtler); } input[type="checkbox"] { @@ -513,16 +523,18 @@ $scroll-width: 5px; min-width: 500px; padding: 16px 16px 0; overflow-y: auto; - border-left: 1px solid var(--sand_300); - background-color: var(--sand_100); + border-left: 1px solid var(--color-neutral-border); + background-color: var(--color-neutral-surface); display: flex; flex-direction: column; + color: var(--color-neutral-content); @include styled-scroll; h3 { margin: 8px 0 16px; font-size: 16px; + color: var(--color-neutral-content); } iframe { diff --git a/web/apps/labelstudio/src/pages/CreateProject/Import/Import.scss b/web/apps/labelstudio/src/pages/CreateProject/Import/Import.scss index 2e7d7fccab66..f27cc1d10cb5 100644 --- a/web/apps/labelstudio/src/pages/CreateProject/Import/Import.scss +++ b/web/apps/labelstudio/src/pages/CreateProject/Import/Import.scss @@ -38,7 +38,7 @@ button { margin-left: -1px; border-radius: 0 5px 5px 0; - background: var(--color-primary-background-bold); + background: var(--color-primary-surface); color: var(--sand_0); cursor: pointer; } @@ -163,11 +163,11 @@ position: relative; a { - color: var(--color-primary-content-bold); + color: var(--color-primary-surface-content); text-decoration: underline; &:hover { - color: var(--color-primary-content-bold-subtle); + color: var(--color-primary-surface-content-subtle); } } diff --git a/web/apps/labelstudio/src/pages/Organization/PeoplePage/PeopleList.scss b/web/apps/labelstudio/src/pages/Organization/PeoplePage/PeopleList.scss index 94cef955585c..5e9e6de08fb8 100644 --- a/web/apps/labelstudio/src/pages/Organization/PeoplePage/PeopleList.scss +++ b/web/apps/labelstudio/src/pages/Organization/PeoplePage/PeopleList.scss @@ -73,12 +73,12 @@ display: flex; &:nth-child(odd):not(&_active) { - background-color: var(--color-neutral-background-bold); + background-color: var(--color-neutral-surface); } &_active { position: relative; - background-color: var(--color-primary-background-bold); + background-color: var(--color-primary-surface); &::before, &::after { @@ -92,7 +92,7 @@ &::after { z-index: 1; - background-color: var(--color-neutral-background-bold); + background-color: var(--color-neutral-surface); width: calc(100% + 22px); box-shadow: inset 4px 0 0 var(--grape_500), 1px 0 0 1px var(--color-neutral-border) inset; } diff --git a/web/apps/labelstudio/src/pages/Organization/PeoplePage/SelectedUser.scss b/web/apps/labelstudio/src/pages/Organization/PeoplePage/SelectedUser.scss index eee041af4168..ad0bc4bc7a02 100644 --- a/web/apps/labelstudio/src/pages/Organization/PeoplePage/SelectedUser.scss +++ b/web/apps/labelstudio/src/pages/Organization/PeoplePage/SelectedUser.scss @@ -1,7 +1,7 @@ .user-info { padding: 20px 24px; border: 1px solid var(--color-neutral-border); - background: var(--color-neutral-background-bold); + background: var(--color-neutral-surface); align-self: start; display: flex; flex-direction: column; @@ -15,9 +15,14 @@ height: 32px; position: absolute; - --button-color: var(--grape_500); + --button-color: var(--color-primary-content); border: none; + + &:hover { + color: var(--color-primary-content); + background-color: var(--color-primary-emphasis-subtle); + } } &__header { @@ -64,7 +69,6 @@ &__links-list { display: flex; flex-direction: column; - max-width: 350px; } &__project-link { @@ -75,11 +79,10 @@ margin-left: -10px; align-items: center; border-radius: 4px; - color: var(--color-primary-content-bold); + color: var(--color-primary-content); &:hover { - background-color: var(--color-primary-emphasis); - color: var(--color-primary-content); + background-color: var(--color-primary-emphasis-subtle); } } } \ No newline at end of file diff --git a/web/apps/labelstudio/src/pages/Projects/Projects.scss b/web/apps/labelstudio/src/pages/Projects/Projects.scss index 0ed14a14f8c0..bcca15f9c101 100644 --- a/web/apps/labelstudio/src/pages/Projects/Projects.scss +++ b/web/apps/labelstudio/src/pages/Projects/Projects.scss @@ -102,8 +102,8 @@ transition: all 150ms ease-out; &:hover { - background-color: var(--color-neutral-background-bold); - border-color: var(--color-primary-border); + background-color: var(--color-neutral-surface); + border-color: var(--color-primary-border-subtle); } &__header { @@ -173,11 +173,11 @@ &_type { &_completed { - --icon-color: var(--color-positive-content-bold); + --icon-color: var(--color-positive-icon); } &_rejected { - --icon-color: var(--color-negative-content-bold); + --icon-color: var(--color-negative-icon); } &_predictions { diff --git a/web/apps/labelstudio/src/pages/Settings/settings.scss b/web/apps/labelstudio/src/pages/Settings/settings.scss index 8946781cd463..373a5bbe6c7d 100644 --- a/web/apps/labelstudio/src/pages/Settings/settings.scss +++ b/web/apps/labelstudio/src/pages/Settings/settings.scss @@ -93,7 +93,7 @@ letter-spacing: 0.4px; a { - color: var(--color-primary-content-bold); + color: var(--color-primary-surface-content); font-size: 12px; font-style: normal; font-weight: 500; @@ -115,7 +115,7 @@ margin: 0; a { - color: var(--color-primary-content-bold); + color: var(--color-primary-surface-content); font-size: 14px; font-style: normal; font-weight: 500; diff --git a/web/apps/labelstudio/src/pages/WebhookPage/WebhookPage.scss b/web/apps/labelstudio/src/pages/WebhookPage/WebhookPage.scss index ad64d4f317e4..97aeb76dc601 100644 --- a/web/apps/labelstudio/src/pages/WebhookPage/WebhookPage.scss +++ b/web/apps/labelstudio/src/pages/WebhookPage/WebhookPage.scss @@ -22,7 +22,7 @@ width: 100%; height: 112px - 24px; background: var(--color-primary-background); - border: 1px var(--color-primary-border-light) solid; + border: 1px var(--color-primary-border-subtlest) solid; margin-left: -2px; display: flex; padding-top: 24px; @@ -40,7 +40,7 @@ } & a { - color: var(--color-primary-content-bold); + color: var(--color-primary-content); text-decoration: underline; } } diff --git a/web/libs/datamanager/src/components/Common/Modal/Modal.scss b/web/libs/datamanager/src/components/Common/Modal/Modal.scss index 908ba109b367..d851820fb60f 100644 --- a/web/libs/datamanager/src/components/Common/Modal/Modal.scss +++ b/web/libs/datamanager/src/components/Common/Modal/Modal.scss @@ -12,6 +12,7 @@ justify-content: center; background-color: rgb(var(--black-raw) / 30%); will-change: opacity; + border-radius: var(-radius-small); &__wrapper { width: 100%; @@ -49,10 +50,12 @@ margin: 0; margin-right: auto; font-size: 20px; + color: var(--color-neutral-content); } &__body { padding: 0 40px 32px; + color: var(--color-neutral-content); &_bare { padding: 0; @@ -64,11 +67,14 @@ &__footer { padding: 16px 32px; - background: rgb(0 0 0 / 3%); + background: var(--color-neutral-surface); box-shadow: inset 0 1px 0 var(--black_5); text-align: center; font-size: 14px; line-height: 22px; + border-bottom-left-radius: var(--radius-small); + border-bottom-right-radius: var(--radius-small); + overflow: hidden; } &_fullscreen &__content { diff --git a/web/libs/datamanager/src/components/Common/Table/Table.scss b/web/libs/datamanager/src/components/Common/Table/Table.scss index 834274d3f8f4..33884f97e3a2 100644 --- a/web/libs/datamanager/src/components/Common/Table/Table.scss +++ b/web/libs/datamanager/src/components/Common/Table/Table.scss @@ -75,7 +75,7 @@ } &_even:not(.table__row_wrapper_selected) { - background-color: var(--color-neutral-background-bold); + background-color: var(--color-neutral-surface); } &_selected { diff --git a/web/libs/datamanager/src/components/Common/Tabs/Tabs.scss b/web/libs/datamanager/src/components/Common/Tabs/Tabs.scss index 982784531261..ff5f4cadc262 100644 --- a/web/libs/datamanager/src/components/Common/Tabs/Tabs.scss +++ b/web/libs/datamanager/src/components/Common/Tabs/Tabs.scss @@ -4,9 +4,7 @@ align-items: stretch; justify-content: space-between; box-shadow: 0 -1px 0 var(--color-neutral-border) inset; - background: var(--color-neutral-background-bold); - - // border-bottom: 1px solid var(--color-neutral-border); + background: var(--color-neutral-surface); padding-top: 2px; &-content { @@ -33,7 +31,7 @@ &__item { color: var(--color-neutral-content-subtler); - background-color: var(--color-neutral-background-bold-dark); + background-color: var(--color-neutral-surface-active); width: 100%; overflow: hidden; cursor: pointer; @@ -119,7 +117,7 @@ } &:hover { - color: var(--color-primary-content-bold); + color: var(--color-primary-surface-content); } } diff --git a/web/libs/datamanager/src/components/Label/Label.scss b/web/libs/datamanager/src/components/Label/Label.scss index 261f86f0ce6b..f5dff49467a6 100644 --- a/web/libs/datamanager/src/components/Label/Label.scss +++ b/web/libs/datamanager/src/components/Label/Label.scss @@ -87,7 +87,7 @@ overflow-y: auto; & > div { - --main-bg-color: var(--color-neutral-background-bold); + --main-bg-color: var(--color-neutral-surface); flex: 1; height: auto; diff --git a/web/libs/editor/src/common/Modal/Modal.scss b/web/libs/editor/src/common/Modal/Modal.scss index 2ca3a47e11a0..7c3b91ac6225 100644 --- a/web/libs/editor/src/common/Modal/Modal.scss +++ b/web/libs/editor/src/common/Modal/Modal.scss @@ -65,7 +65,7 @@ &__footer { padding: 16px 32px; - background: var(--color-neutral-background-bold); + background: var(--color-neutral-surface); box-shadow: inset 0 1px 0 rgb(0 0 0 / 5%); text-align: center; font-size: 14px; diff --git a/web/libs/editor/src/components/App/App.scss b/web/libs/editor/src/components/App/App.scss index 629ac986a339..ce6d2ca40e5a 100644 --- a/web/libs/editor/src/components/App/App.scss +++ b/web/libs/editor/src/components/App/App.scss @@ -1,7 +1,7 @@ @import "../../assets/styles/global"; .editor { - --main-bg-color: var(--sand_100); + --main-bg-color: var(--color-neutral-surface); --sticky-items-offset: 48px; --topbar-height: 48px; --bottombar-height: 0; diff --git a/web/libs/editor/src/components/TopBar/TopBar.scss b/web/libs/editor/src/components/TopBar/TopBar.scss index a9ff3fef3a83..8909ee5b55f2 100644 --- a/web/libs/editor/src/components/TopBar/TopBar.scss +++ b/web/libs/editor/src/components/TopBar/TopBar.scss @@ -6,7 +6,7 @@ display: flex; align-items: stretch; justify-content: space-between; - background-color: var(--color-neutral-backround-bold-dark); + background-color: var(--color-neutral-surface-active); border-bottom: 1px solid var(--color-neutral-border); user-select: none; position: sticky; @@ -40,7 +40,7 @@ &_newLabelingUI { display: block; - background-color: var(--color-neutral-background-bold-dark); + background-color: var(--color-neutral-surface-active); height: 42px; border-bottom: 1px solid var(--color-neutral-border); diff --git a/web/libs/editor/src/regions/TextAreaRegion/TextAreaRegion.scss b/web/libs/editor/src/regions/TextAreaRegion/TextAreaRegion.scss index 50894c1611bc..98dda584fc90 100644 --- a/web/libs/editor/src/regions/TextAreaRegion/TextAreaRegion.scss +++ b/web/libs/editor/src/regions/TextAreaRegion/TextAreaRegion.scss @@ -1,5 +1,5 @@ .mark { - background-color: var(--color-neutral-background-bold); + background-color: var(--color-neutral-surface); border: 1px solid var(--color-neutral-border); border-radius: var(--radius-small); margin: 0 var(--spacing-small) 0 0; @@ -40,7 +40,7 @@ flex: 0 0 32px; &:hover { - background-color: var(--color-neutral-background-bold); + background-color: var(--color-neutral-surface); } &_look { diff --git a/web/libs/ui/src/tokens/colors.scss b/web/libs/ui/src/tokens/colors.scss index aee4086d47e1..fd2058faed0a 100644 --- a/web/libs/ui/src/tokens/colors.scss +++ b/web/libs/ui/src/tokens/colors.scss @@ -100,384 +100,406 @@ /* Primitive Tokens [DO NOT USE] */ // Primitive Tokens: Colors - --color-blueberry-000: #f0f7fe; - --color-blueberry-100: #d4e7fb; - --color-blueberry-200: #b6d6f8; - --color-blueberry-300: #99c5f5; - --color-blueberry-400: #539eee; - --color-blueberry-500: #3287e2; - --color-blueberry-600: #2b78ca; - --color-blueberry-700: #2b69ab; - --color-blueberry-800: #25507e; - --color-blueberry-900: #1c3c5f; - --color-blueberry-950: #0b1826; - --color-canteloupe-000: #fff6ef; - --color-canteloupe-100: #ffe4d0; - --color-canteloupe-200: #ffd3b1; - --color-canteloupe-300: #ffb882; - --color-canteloupe-400: #ffa663; - --color-canteloupe-500: #e69559; - --color-canteloupe-600: #cc854f; - --color-canteloupe-700: #b37445; - --color-canteloupe-800: #99643a; - --color-canteloupe-900: #664228; - --color-canteloupe-950: #331c14; - --color-fig-000: #f8f2fc; - --color-fig-100: #e9d6f7; - --color-fig-200: #dabdf1; - --color-fig-300: #c595e9; - --color-fig-400: #ac79d2; - --color-fig-500: #9f6cc6; - --color-fig-600: #9262b6; - --color-fig-700: #7f569f; - --color-fig-800: #6d4a88; - --color-fig-900: #5b3e72; - --color-fig-950: #1f1526; - --color-grape-000: #f0f3fe; - --color-grape-100: #d4dbfb; - --color-grape-200: #b6c3f8; - --color-grape-300: #99abf5; - --color-grape-400: #6d87f1; - --color-grape-500: #617ada; - --color-grape-600: #576cc1; - --color-grape-700: #4c5fa9; - --color-grape-800: #37447a; - --color-grape-900: #2b3660; - --color-grape-950: #111626; - --color-kale-000: #f4f9f9; - --color-kale-100: #d4f1eb; - --color-kale-200: #abe4da; - --color-kale-300: #7acec1; - --color-kale-400: #57b7ab; - --color-kale-500: #34988d; - --color-kale-600: #287a72; - --color-kale-700: #22625d; - --color-kale-800: #204f4d; - --color-kale-900: #1f4240; - --color-kale-950: #122625; - --color-kiwi-000: #f6f9f4; - --color-kiwi-100: #def1d4; - --color-kiwi-200: #bfe4ab; - --color-kiwi-300: #97ce7a; - --color-kiwi-400: #78b757; - --color-kiwi-500: #579834; - --color-kiwi-600: #457a28; - --color-kiwi-700: #386222; - --color-kiwi-800: #304f20; - --color-kiwi-900: #2b421f; - --color-kiwi-950: #192612; - --color-mango-000: #fff9ef; - --color-mango-100: #ffeed0; - --color-mango-200: #ffe2b1; - --color-mango-300: #ffd182; - --color-mango-400: #faba4c; - --color-mango-500: #f4aa2a; - --color-mango-600: #eb9c14; - --color-mango-700: #cc8e24; - --color-mango-800: #a07222; - --color-mango-900: #624718; - --color-mango-950: #261c0a; - --color-persimmon-000: #fff1ee; - --color-persimmon-100: #ffd6cd; - --color-persimmon-200: #ffbaaa; - --color-persimmon-300: #ff9f89; - --color-persimmon-400: #ff7557; - --color-persimmon-500: #e6694e; - --color-persimmon-600: #cc5e46; - --color-persimmon-700: #b3523d; - --color-persimmon-800: #994634; - --color-persimmon-900: #803b2c; - --color-persimmon-950: #26120d; - --color-plum-000: #fbf2fc; - --color-plum-100: #f7d6f2; - --color-plum-200: #f1bde9; - --color-plum-300: #e995dc; - --color-plum-400: #e37bd3; - --color-plum-500: #cc6fbe; - --color-plum-600: #b662a9; - --color-plum-700: #9f5694; - --color-plum-800: #884a80; - --color-plum-900: #723e6a; - --color-plum-950: #261524; - --color-sand-000: #fdfdfc; - --color-sand-100: #f9f8f6; - --color-sand-200: #f0efeb; - --color-sand-300: #e1ded5; - --color-sand-400: #cac5b8; - --color-sand-500: #a49f95; - --color-sand-600: #6b6860; - --color-sand-700: #45433e; - --color-sand-800: #262522; - --color-sand-900: #12110d; - --color-sand-950: #080706; + --color-blueberry-000: rgb(240 247 254); + --color-blueberry-100: rgb(212 231 251); + --color-blueberry-200: rgb(182 214 248); + --color-blueberry-300: rgb(153 197 245); + --color-blueberry-400: rgb(83 158 238); + --color-blueberry-500: rgb(50 135 226); + --color-blueberry-600: rgb(43 120 202); + --color-blueberry-700: rgb(43 105 171); + --color-blueberry-800: rgb(37 80 126); + --color-blueberry-900: rgb(28 60 95); + --color-blueberry-950: rgb(11 24 38); + --color-canteloupe-000: rgb(255 246 239); + --color-canteloupe-100: rgb(255 228 208); + --color-canteloupe-200: rgb(255 211 177); + --color-canteloupe-300: rgb(255 184 130); + --color-canteloupe-400: rgb(255 166 99); + --color-canteloupe-500: rgb(230 149 89); + --color-canteloupe-600: rgb(204 133 79); + --color-canteloupe-700: rgb(179 116 69); + --color-canteloupe-800: rgb(153 100 58); + --color-canteloupe-900: rgb(102 66 40); + --color-canteloupe-950: rgb(51 28 20); + --color-fig-000: rgb(248 242 252); + --color-fig-100: rgb(233 214 247); + --color-fig-200: rgb(218 189 241); + --color-fig-300: rgb(197 149 233); + --color-fig-400: rgb(172 121 210); + --color-fig-500: rgb(159 108 198); + --color-fig-600: rgb(146 98 182); + --color-fig-700: rgb(127 86 159); + --color-fig-800: rgb(109 74 136); + --color-fig-900: rgb(91 62 114); + --color-fig-950: rgb(31 21 38); + --color-grape-000: rgb(240 243 254); + --color-grape-100: rgb(212 219 251); + --color-grape-200: rgb(182 195 248); + --color-grape-300: rgb(153 171 245); + --color-grape-400: rgb(109 135 241); + --color-grape-500: rgb(97 122 218); + --color-grape-600: rgb(87 108 193); + --color-grape-700: rgb(76 95 169); + --color-grape-800: rgb(55 68 122); + --color-grape-900: rgb(43 54 96); + --color-grape-950: rgb(17 22 38); + --color-kale-000: rgb(244 249 249); + --color-kale-100: rgb(212 241 235); + --color-kale-200: rgb(171 228 218); + --color-kale-300: rgb(122 206 193); + --color-kale-400: rgb(87 183 171); + --color-kale-500: rgb(52 152 141); + --color-kale-600: rgb(40 122 114); + --color-kale-700: rgb(34 98 93); + --color-kale-800: rgb(32 79 77); + --color-kale-900: rgb(31 66 64); + --color-kale-950: rgb(18 38 37); + --color-kiwi-000: rgb(246 249 244); + --color-kiwi-100: rgb(222 241 212); + --color-kiwi-200: rgb(191 228 171); + --color-kiwi-300: rgb(151 206 122); + --color-kiwi-400: rgb(120 183 87); + --color-kiwi-500: rgb(87 152 52); + --color-kiwi-600: rgb(69 122 40); + --color-kiwi-700: rgb(56 98 34); + --color-kiwi-800: rgb(48 79 32); + --color-kiwi-900: rgb(43 66 31); + --color-kiwi-950: rgb(25 38 18); + --color-mango-000: rgb(255 249 239); + --color-mango-100: rgb(255 238 208); + --color-mango-200: rgb(255 226 177); + --color-mango-300: rgb(255 209 130); + --color-mango-400: rgb(250 186 76); + --color-mango-500: rgb(244 170 42); + --color-mango-600: rgb(235 156 20); + --color-mango-700: rgb(204 142 36); + --color-mango-800: rgb(160 114 34); + --color-mango-900: rgb(98 71 24); + --color-mango-950: rgb(38 28 10); + --color-persimmon-000: rgb(255 241 238); + --color-persimmon-100: rgb(255 214 205); + --color-persimmon-200: rgb(255 186 170); + --color-persimmon-300: rgb(255 159 137); + --color-persimmon-400: rgb(255 117 87); + --color-persimmon-500: rgb(230 105 78); + --color-persimmon-600: rgb(204 94 70); + --color-persimmon-700: rgb(179 82 61); + --color-persimmon-800: rgb(153 70 52); + --color-persimmon-900: rgb(128 59 44); + --color-persimmon-950: rgb(38 18 13); + --color-plum-000: rgb(251 242 252); + --color-plum-100: rgb(247 214 242); + --color-plum-200: rgb(241 189 233); + --color-plum-300: rgb(233 149 220); + --color-plum-400: rgb(227 123 211); + --color-plum-500: rgb(204 111 190); + --color-plum-600: rgb(182 98 169); + --color-plum-700: rgb(159 86 148); + --color-plum-800: rgb(136 74 128); + --color-plum-900: rgb(114 62 106); + --color-plum-950: rgb(38 21 36); + --color-sand-000: rgb(253 253 252); + --color-sand-100: rgb(249 248 246); + --color-sand-200: rgb(240 239 235); + --color-sand-300: rgb(225 222 213); + --color-sand-400: rgb(202 197 184); + --color-sand-500: rgb(164 159 149); + --color-sand-600: rgb(107 104 96); + --color-sand-700: rgb(69 67 62); + --color-sand-800: rgb(38 37 34); + --color-sand-900: rgb(18 17 13); + --color-sand-950: rgb(13 12 9); /* Semantic Tokens */ // Semantic Tokens: Colors // Light Color Scheme (Default) - --color-accent-blueberry-bold: var(--color-blueberry-500); + --color-accent-blueberry-bold: var(--color-blueberry-600); --color-accent-blueberry-dark: var(--color-blueberry-900); --color-accent-blueberry-subtle: var(--color-blueberry-100); --color-accent-blueberry-subtlest: var(--color-blueberry-000); - --color-accent-canteloupe-bold: var(--color-canteloupe-500); + --color-accent-canteloupe-bold: var(--color-canteloupe-600); --color-accent-canteloupe-dark: var(--color-canteloupe-900); --color-accent-canteloupe-subtle: var(--color-canteloupe-100); --color-accent-canteloupe-subtlest: var(--color-canteloupe-000); - --color-accent-fig-bold: var(--color-fig-500); + --color-accent-fig-bold: var(--color-fig-600); --color-accent-fig-dark: var(--color-fig-900); --color-accent-fig-subtle: var(--color-fig-100); --color-accent-fig-subtlest: var(--color-fig-000); - --color-accent-grape-bold: var(--color-grape-500); + --color-accent-grape-bold: var(--color-grape-600); --color-accent-grape-dark: var(--color-grape-900); --color-accent-grape-subtle: var(--color-grape-100); --color-accent-grape-subtlest: var(--color-grape-000); - --color-accent-kale-bold: var(--color-kale-500); + --color-accent-kale-bold: var(--color-kale-600); --color-accent-kale-dark: var(--color-kale-900); --color-accent-kale-subtle: var(--color-kale-100); --color-accent-kale-subtlest: var(--color-kale-000); - --color-accent-kiwi-bold: var(--color-kiwi-500); + --color-accent-kiwi-bold: var(--color-kiwi-600); --color-accent-kiwi-dark: var(--color-kiwi-900); --color-accent-kiwi-subtle: var(--color-kiwi-100); --color-accent-kiwi-subtlest: var(--color-kiwi-000); - --color-accent-mango-bold: var(--color-mango-500); + --color-accent-mango-bold: var(--color-mango-600); --color-accent-mango-dark: var(--color-mango-900); --color-accent-mango-subtle: var(--color-mango-100); --color-accent-mango-subtlest: var(--color-mango-000); - --color-accent-persimmon-bold: var(--color-persimmon-500); + --color-accent-persimmon-bold: var(--color-persimmon-600); --color-accent-persimmon-dark: var(--color-persimmon-900); --color-accent-persimmon-subtle: var(--color-persimmon-100); --color-accent-persimmon-subtlest: var(--color-persimmon-000); - --color-accent-plum-bold: var(--color-plum-500); + --color-accent-plum-bold: var(--color-plum-600); --color-accent-plum-dark: var(--color-plum-900); --color-accent-plum-subtle: var(--color-plum-100); --color-accent-plum-subtlest: var(--color-plum-000); - --color-accent-sand-bold: var(--color-sand-500); + --color-accent-sand-bold: var(--color-sand-600); --color-accent-sand-dark: var(--color-sand-900); --color-accent-sand-subtle: var(--color-sand-100); --color-accent-sand-subtlest: var(--color-sand-100); --color-negative-background: var(--color-persimmon-000); - --color-negative-background-bold: var(--color-persimmon-600); - --color-negative-background-bold-dark: var(--color-persimmon-800); - --color-negative-background-bold-light: var(--color-persimmon-500); + --color-negative-emphasis: var(--color-persimmon-100); + --color-negative-emphasis-subtle: var(--color-persimmon-000); --color-negative-border: var(--color-persimmon-700); - --color-negative-border-dark: var(--color-persimmon-800); - --color-negative-border-light: var(--color-persimmon-500); - --color-negative-border-lighter: var(--color-persimmon-300); - --color-negative-border-lightest: var(--color-persimmon-200); - --color-negative-content: var(--color-persimmon-000); - --color-negative-content-bold: var(--color-persimmon-700); - --color-negative-content-bold-subtle: var(--color-persimmon-500); - --color-negative-content-subtle: var(--color-persimmon-100); - --color-negative-emphasis: var(--color-persimmon-200); - --color-negative-emphasis-subtle: var(--color-persimmon-100); + --color-negative-border-bold: var(--color-persimmon-800); + --color-negative-border-subtle: var(--color-persimmon-500); + --color-negative-border-subtler: var(--color-persimmon-300); + --color-negative-border-subtlest: var(--color-persimmon-200); + --color-negative-content: var(--color-persimmon-700); + --color-negative-content-subtle: var(--color-persimmon-500); --color-negative-focus-outline: var(--color-persimmon-200); + --color-negative-icon: var(--color-persimmon-500); + --color-negative-surface: var(--color-persimmon-600); + --color-negative-surface-content: var(--color-persimmon-000); + --color-negative-surface-content-subtle: var(--color-persimmon-100); + --color-negative-surface-active: var(--color-persimmon-800); + --color-negative-surface-icon: var(--color-persimmon-100); + --color-negative-surface-hover: var(--color-persimmon-500); --color-neutral-background: var(--color-sand-000); - --color-neutral-background-bold: var(--color-sand-100); - --color-neutral-background-bold-dark: var(--color-sand-200); - --color-neutral-background-bold-light: var(--color-sand-000); + --color-neutral-emphasis: var(--color-sand-200); + --color-neutral-background-bold: var(--color-sand-000); + --color-neutral-emphasis-subtle: var(--color-sand-100); --color-neutral-border: var(--color-sand-300); - --color-neutral-border-dark: var(--color-sand-400); - --color-neutral-border-darker: var(--color-sand-500); - --color-neutral-border-darkest: var(--color-sand-600); - --color-neutral-border-light: var(--color-sand-300); - --color-neutral-border-lighter: var(--color-sand-200); + --color-neutral-border-bold: var(--color-sand-400); + --color-neutral-border-bolder: var(--color-sand-500); + --color-neutral-border-boldest: var(--color-sand-600); + --color-neutral-border-subtle: var(--color-sand-300); + --color-neutral-border-subtler: var(--color-sand-200); --color-neutral-content: var(--color-sand-800); --color-neutral-content-subtle: var(--color-sand-700); --color-neutral-content-subtler: var(--color-sand-600); --color-neutral-content-subtlest: var(--color-sand-500); - --color-neutral-emphasis: var(--color-sand-200); - --color-neutral-emphasis-subtle: var(--color-sand-100); - --color-neutral-shadow: var(--color-neutral-900); + --color-neutral-icon: var(--color-sand-700); + --color-neutral-shadow: var(--color-sand-900); + --color-neutral-surface: var(--color-sand-100); + --color-neutral-surface-active: var(--color-sand-200); + --color-neutral-surface-hover: var(--color-sand-000); --color-neutral-inverted-background: var(--color-sand-900); - --color-neutral-inverted-background-bold: var(--color-sand-900); - --color-neutral-inverted-background-bold-dark: var(--color-sand-700); - --color-neutral-inverted-background-bold-light: var(--color-sand-800); --color-neutral-inverted-border: var(--color-sand-800); --color-neutral-inverted-content: var(--color-sand-100); --color-neutral-inverted-content-subtle: var(--color-sand-400); --color-neutral-inverted-content-subtler: var(--color-sand-300); --color-neutral-inverted-content-subtlest: var(--color-sand-500); + --color-neutral-inverted-surface: var(--color-sand-900); + --color-neutral-inverted-surface-active: var(--color-sand-700); + --color-neutral-inverted-surface-hover: var(--color-sand-800); --color-positive-background: var(--color-kale-000); - --color-positive-background-bold: var(--color-kale-600); - --color-positive-background-bold-dark: var(--color-kale-800); - --color-positive-background-bold-light: var(--color-kale-500); + --color-positive-emphasis: var(--color-kale-100); + --color-positive-emphasis-subtle: var(--color-kale-000); --color-positive-border: var(--color-kale-700); - --color-positive-border-dark: var(--color-kale-800); - --color-positive-border-light: var(--color-kale-500); - --color-positive-border-lighter: var(--color-kale-300); - --color-positive-border-lightest: var(--color-kale-200); - --color-positive-content: var(--color-kale-000); - --color-positive-content-bold: var(--color-kale-700); - --color-positive-content-bold-subtle: var(--color-kale-600); - --color-positive-content-subtle: var(--color-kale-100); - --color-positive-emphasis: var(--color-kale-200); - --color-positive-emphasis-subtle: var(--color-kale-100); + --color-positive-border-bold: var(--color-kale-800); + --color-positive-border-subtle: var(--color-kale-500); + --color-positive-border-subtler: var(--color-kale-300); + --color-positive-border-subtlest: var(--color-kale-200); + --color-positive-content: var(--color-kale-700); + --color-positive-content-subtle: var(--color-kale-500); --color-positive-focus-outline: var(--color-kale-200); + --color-positive-icon: var(--color-kale-500); + --color-positive-surface: var(--color-kale-600); + --color-positive-surface-content: var(--color-kale-000); + --color-positive-surface-content-subtle: var(--color-kale-100); + --color-positive-surface-active: var(--color-kale-800); + --color-positive-surface-icon: var(--color-kale-100); + --color-positive-surface-hover: var(--color-kale-500); --color-primary-background: var(--color-grape-000); - --color-primary-background-bold: var(--color-grape-700); - --color-primary-background-bold-dark: var(--color-grape-800); - --color-primary-background-bold-light: var(--color-grape-600); - --color-primary-border: var(--color-grape-700); - --color-primary-border-dark: var(--color-grape-800); - --color-primary-border-light: var(--color-grape-500); - --color-primary-border-lighter: var(--color-grape-300); - --color-primary-border-lightest: var(--color-grape-200); - --color-primary-content: var(--color-grape-000); - --color-primary-content-bold: var(--color-grape-700); - --color-primary-content-bold-subtle: var(--color-grape-500); - --color-primary-content-subtle: var(--color-grape-100); --color-primary-emphasis: var(--color-grape-100); --color-primary-emphasis-subtle: var(--color-grape-000); + --color-primary-border: var(--color-grape-700); + --color-primary-border-bold: var(--color-grape-800); + --color-primary-border-subtle: var(--color-grape-500); + --color-primary-border-subtler: var(--color-grape-300); + --color-primary-border-subtlest: var(--color-grape-200); + --color-primary-content: var(--color-grape-700); + --color-primary-content-subtle: var(--color-grape-500); --color-primary-focus-outline: var(--color-grape-200); + --color-primary-icon: var(--color-grape-500); + --color-primary-shadow: var(--color-grape-900); + --color-primary-surface: var(--color-grape-700); + --color-primary-surface-content: var(--color-grape-000); + --color-primary-surface-content-subtle: var(--color-grape-100); + --color-primary-surface-active: var(--color-grape-800); + --color-primary-surface-icon: var(--color-grape-100); + --color-primary-surface-hover: var(--color-grape-600); --color-warning-background: var(--color-canteloupe-000); - --color-warning-background-bold: var(--color-canteloupe-600); - --color-warning-background-bold-dark: var(--color-canteloupe-800); - --color-warning-background-bold-light: var(--color-canteloupe-500); + --color-warning-emphasis: var(--color-canteloupe-100); + --color-warning-emphasis-subtle: var(--color-canteloupe-000); --color-warning-border: var(--color-canteloupe-700); - --color-warning-border-dark: var(--color-canteloupe-800); - --color-warning-border-light: var(--color-canteloupe-500); - --color-warning-border-lighter: var(--color-canteloupe-300); - --color-warning-border-lightest: var(--color-canteloupe-200); - --color-warning-content: var(--color-canteloupe-000); - --color-warning-content-bold: var(--color-canteloupe-800); - --color-warning-content-bold-subtle: var(--color-canteloupe-600); - --color-warning-content-subtle: var(--color-canteloupe-100); - --color-warning-emphasis: var(--color-canteloupe-200); - --color-warning-emphasis-subtle: var(--color-canteloupe-100); + --color-warning-border-bold: var(--color-canteloupe-800); + --color-warning-border-subtle: var(--color-canteloupe-500); + --color-warning-border-subtler: var(--color-canteloupe-300); + --color-warning-border-subtlest: var(--color-canteloupe-200); + --color-warning-content: var(--color-canteloupe-700); + --color-warning-content-subtle: var(--color-canteloupe-500); --color-warning-focus-outline: var(--color-canteloupe-200); + --color-warning-icon: var(--color-canteloupe-500); + --color-warning-surface: var(--color-canteloupe-600); + --color-warning-surface-content: var(--color-canteloupe-000); + --color-warning-surface-content-subtle: var(--color-canteloupe-100); + --color-warning-surface-active: var(--color-canteloupe-800); + --color-warning-surface-icon: var(--color-canteloupe-100); + --color-warning-surface-hover: var(--color-canteloupe-500); // Dark Color Scheme &[data-color-scheme="dark"] { --color-accent-blueberry-bold: var(--color-blueberry-500); --color-accent-blueberry-dark: var(--color-blueberry-300); - --color-accent-blueberry-subtle: var(--color-blueberry-800); - --color-accent-blueberry-subtlest: var(--color-blueberry-900); + --color-accent-blueberry-subtle: var(--color-blueberry-900); + --color-accent-blueberry-subtlest: var(--color-blueberry-950); --color-accent-canteloupe-bold: var(--color-canteloupe-500); --color-accent-canteloupe-dark: var(--color-canteloupe-300); - --color-accent-canteloupe-subtle: var(--color-canteloupe-800); - --color-accent-canteloupe-subtlest: var(--color-canteloupe-900); + --color-accent-canteloupe-subtle: var(--color-canteloupe-900); + --color-accent-canteloupe-subtlest: var(--color-canteloupe-950); --color-accent-fig-bold: var(--color-fig-500); --color-accent-fig-dark: var(--color-fig-300); --color-accent-fig-subtle: var(--color-fig-900); - --color-accent-fig-subtlest: var(--color-fig-800); + --color-accent-fig-subtlest: var(--color-fig-950); --color-accent-grape-bold: var(--color-grape-500); --color-accent-grape-dark: var(--color-grape-300); - --color-accent-grape-subtle: var(--color-grape-800); - --color-accent-grape-subtlest: var(--color-grape-900); + --color-accent-grape-subtle: var(--color-grape-900); + --color-accent-grape-subtlest: var(--color-grape-950); --color-accent-kale-bold: var(--color-kale-500); --color-accent-kale-dark: var(--color-kale-300); - --color-accent-kale-subtle: var(--color-kale-800); - --color-accent-kale-subtlest: var(--color-kale-900); + --color-accent-kale-subtle: var(--color-kale-900); + --color-accent-kale-subtlest: var(--color-kale-950); --color-accent-kiwi-bold: var(--color-kiwi-500); --color-accent-kiwi-dark: var(--color-kiwi-300); - --color-accent-kiwi-subtle: var(--color-kiwi-800); - --color-accent-kiwi-subtlest: var(--color-kiwi-900); + --color-accent-kiwi-subtle: var(--color-kiwi-900); + --color-accent-kiwi-subtlest: var(--color-kiwi-950); --color-accent-mango-bold: var(--color-mango-500); --color-accent-mango-dark: var(--color-mango-300); - --color-accent-mango-subtle: var(--color-mango-800); - --color-accent-mango-subtlest: var(--color-mango-900); + --color-accent-mango-subtle: var(--color-mango-900); + --color-accent-mango-subtlest: var(--color-mango-950); --color-accent-persimmon-bold: var(--color-persimmon-500); --color-accent-persimmon-dark: var(--color-persimmon-300); --color-accent-persimmon-subtle: var(--color-persimmon-900); - --color-accent-persimmon-subtlest: var(--color-persimmon-800); + --color-accent-persimmon-subtlest: var(--color-persimmon-950); --color-accent-plum-bold: var(--color-plum-500); --color-accent-plum-dark: var(--color-plum-300); --color-accent-plum-subtle: var(--color-plum-900); - --color-accent-plum-subtlest: var(--color-plum-800); + --color-accent-plum-subtlest: var(--color-plum-950); --color-accent-sand-bold: var(--color-sand-500); --color-accent-sand-dark: var(--color-sand-300); --color-accent-sand-subtle: var(--color-sand-900); - --color-accent-sand-subtlest: var(--color-sand-800); - --color-negative-background: var(--color-persimmon-900); - --color-negative-background-bold: var(--color-persimmon-600); - --color-negative-background-bold-dark: var(--color-persimmon-700); - --color-negative-background-bold-light: var(--color-persimmon-500); - --color-negative-border: var(--color-persimmon-600); - --color-negative-border-dark: var(--color-persimmon-400); - --color-negative-border-light: var(--color-persimmon-800); - --color-negative-border-lighter: var(--color-persimmon-700); - --color-negative-border-lightest: var(--color-persimmon-800); - --color-negative-content: var(--color-persimmon-000); - --color-negative-content-bold: var(--color-persimmon-500); - --color-negative-content-bold-subtle: var(--color-persimmon-700); - --color-negative-content-subtle: var(--color-persimmon-100); + --color-accent-sand-subtlest: var(--color-sand-950); + --color-negative-background: var(--color-persimmon-950); --color-negative-emphasis: var(--color-persimmon-900); --color-negative-emphasis-subtle: var(--color-persimmon-950); + --color-negative-border: var(--color-persimmon-600); + --color-negative-border-bold: var(--color-persimmon-400); + --color-negative-border-subtle: var(--color-persimmon-800); + --color-negative-border-subtler: var(--color-persimmon-700); + --color-negative-border-subtlest: var(--color-persimmon-800); + --color-negative-content: var(--color-persimmon-500); + --color-negative-content-subtle: var(--color-persimmon-700); --color-negative-focus-outline: var(--color-persimmon-700); + --color-negative-icon: var(--color-persimmon-600); + --color-negative-surface: var(--color-persimmon-600); + --color-negative-surface-content: var(--color-persimmon-000); + --color-negative-surface-content-subtle: var(--color-persimmon-300); + --color-negative-surface-active: var(--color-persimmon-700); + --color-negative-surface-icon: var(--color-persimmon-100); + --color-negative-surface-hover: var(--color-persimmon-500); --color-neutral-background: var(--color-sand-800); - --color-neutral-background-bold: var(--color-sand-900); - --color-neutral-background-bold-dark: var(--color-sand-950); - --color-neutral-background-bold-light: var(--color-sand-800); + --color-neutral-emphasis: var(--color-sand-950); + --color-neutral-emphasis-subtle: var(--color-sand-900); --color-neutral-border: var(--color-sand-700); - --color-neutral-border-dark: var(--color-sand-900); - --color-neutral-border-darker: var(--color-sand-900); - --color-neutral-border-darkest: var(--color-sand-950); - --color-neutral-border-light: var(--color-sand-600); - --color-neutral-border-lighter: var(--color-sand-500); + --color-neutral-border-bold: var(--color-sand-600); + --color-neutral-border-bolder: var(--color-sand-800); + --color-neutral-border-boldest: var(--color-sand-900); + --color-neutral-border-subtle: var(--color-sand-600); + --color-neutral-border-subtler: var(--color-sand-500); --color-neutral-content: var(--color-sand-300); --color-neutral-content-subtle: var(--color-sand-400); --color-neutral-content-subtler: var(--color-sand-500); --color-neutral-content-subtlest: var(--color-sand-600); - --color-neutral-emphasis: var(--color-sand-900); - --color-neutral-emphasis-subtle: var(--color-neutral-950); - --color-neutral-shadow: var(--color-neutral-950); + --color-neutral-icon: var(--color-sand-400); + --color-neutral-shadow: var(--color-sand-950); + --color-neutral-surface: var(--color-sand-900); + --color-neutral-surface-active: var(--color-sand-900); + --color-neutral-surface-hover: var(--color-sand-800); --color-neutral-inverted-background: var(--color-sand-000); - --color-neutral-inverted-background-bold: var(--color-sand-200); - --color-neutral-inverted-background-bold-dark: var(--color-sand-300); - --color-neutral-inverted-background-bold-light: var(--color-sand-100); --color-neutral-inverted-border: var(--color-sand-300); --color-neutral-inverted-content: var(--color-sand-800); --color-neutral-inverted-content-subtle: var(--color-sand-500); --color-neutral-inverted-content-subtler: var(--color-sand-600); --color-neutral-inverted-content-subtlest: var(--color-sand-700); - --color-positive-background: var(--color-kale-900); - --color-positive-background-bold: var(--color-kale-600); - --color-positive-background-bold-dark: var(--color-kale-700); - --color-positive-background-bold-light: var(--color-kale-500); - --color-positive-border: var(--color-kale-900); - --color-positive-border-dark: var(--color-kale-900); - --color-positive-border-light: var(--color-kale-800); - --color-positive-border-lighter: var(--color-kale-700); - --color-positive-border-lightest: var(--color-kale-600); - --color-positive-content: var(--color-kale-000); - --color-positive-content-bold: var(--color-kale-500); - --color-positive-content-bold-subtle: var(--color-kale-700); - --color-positive-content-subtle: var(--color-kale-100); + --color-neutral-inverted-surface: var(--color-sand-200); + --color-neutral-inverted-surface-active: var(--color-sand-300); + --color-neutral-inverted-surface-hover: var(--color-sand-100); + --color-positive-background: var(--color-kale-950); --color-positive-emphasis: var(--color-kale-900); + --color-neutral-background-bold: var(--color-sand-900); --color-positive-emphasis-subtle: var(--color-kale-950); + --color-positive-border: var(--color-kale-900); + --color-positive-border-bold: var(--color-kale-900); + --color-positive-border-subtle: var(--color-kale-800); + --color-positive-border-subtler: var(--color-kale-700); + --color-positive-border-subtlest: var(--color-kale-600); + --color-positive-content: var(--color-kale-500); + --color-positive-content-subtle: var(--color-kale-700); --color-positive-focus-outline: var(--color-kale-700); + --color-positive-icon: var(--color-kale-600); + --color-positive-surface: var(--color-kale-600); + --color-positive-surface-content: var(--color-kale-000); + --color-positive-surface-content-subtle: var(--color-kale-300); + --color-positive-surface-active: var(--color-kale-700); + --color-positive-surface-icon: var(--color-kale-100); + --color-positive-surface-hover: var(--color-kale-500); --color-primary-background: var(--color-grape-950); - --color-primary-background-bold: var(--color-grape-600); - --color-primary-background-bold-dark: var(--color-grape-700); - --color-primary-background-bold-light: var(--color-grape-500); - --color-primary-border: var(--color-grape-600); - --color-primary-border-dark: var(--color-grape-400); - --color-primary-border-light: var(--color-grape-600); - --color-primary-border-lighter: var(--color-grape-700); - --color-primary-border-lightest: var(--color-grape-800); - --color-primary-content: var(--color-grape-000); - --color-primary-content-bold: var(--color-grape-500); - --color-primary-content-bold-subtle: var(--color-grape-700); - --color-primary-content-subtle: var(--color-grape-300); --color-primary-emphasis: var(--color-grape-900); --color-primary-emphasis-subtle: var(--color-grape-950); + --color-primary-border: var(--color-grape-600); + --color-primary-border-bold: var(--color-grape-400); + --color-primary-border-subtle: var(--color-grape-600); + --color-primary-border-subtler: var(--color-grape-700); + --color-primary-border-subtlest: var(--color-grape-800); + --color-primary-content: var(--color-grape-500); + --color-primary-content-subtle: var(--color-grape-700); --color-primary-focus-outline: var(--color-grape-700); - --color-warning-background: var(--color-canteloupe-900); - --color-warning-background-bold: var(--color-canteloupe-600); - --color-warning-background-bold-dark: var(--color-canteloupe-700); - --color-warning-background-bold-light: var(--color-canteloupe-500); - --color-warning-border: var(--color-canteloupe-900); - --color-warning-border-dark: var(--color-canteloupe-900); - --color-warning-border-light: var(--color-canteloupe-800); - --color-warning-border-lighter: var(--color-canteloupe-700); - --color-warning-border-lightest: var(--color-canteloupe-600); - --color-warning-content: var(--color-canteloupe-000); - --color-warning-content-bold: var(--color-canteloupe-500); - --color-warning-content-bold-subtle: var(--color-canteloupe-700); - --color-warning-content-subtle: var(--color-canteloupe-000); + --color-primary-icon: var(--color-grape-600); + --color-primary-shadow: var(--color-grape-950); + --color-primary-surface: var(--color-grape-600); + --color-primary-surface-content: var(--color-grape-000); + --color-primary-surface-content-subtle: var(--color-grape-300); + --color-primary-surface-active: var(--color-grape-700); + --color-primary-surface-icon: var(--color-grape-100); + --color-primary-surface-hover: var(--color-grape-500); + --color-warning-background: var(--color-canteloupe-950); --color-warning-emphasis: var(--color-canteloupe-900); --color-warning-emphasis-subtle: var(--color-canteloupe-950); + --color-warning-border: var(--color-canteloupe-900); + --color-warning-border-bold: var(--color-canteloupe-900); + --color-warning-border-subtle: var(--color-canteloupe-800); + --color-warning-border-subtler: var(--color-canteloupe-700); + --color-warning-border-subtlest: var(--color-canteloupe-600); + --color-warning-content: var(--color-canteloupe-500); + --color-warning-content-subtle: var(--color-canteloupe-700); --color-warning-focus-outline: var(--color-canteloupe-700); + --color-warning-icon: var(--color-canteloupe-600); + --color-warning-surface: var(--color-canteloupe-600); + --color-warning-surface-content: var(--color-canteloupe-000); + --color-warning-surface-content-subtle: var(--color-canteloupe-300); + --color-warning-surface-active: var(--color-canteloupe-700); + --color-warning-surface-icon: var(--color-canteloupe-100); + --color-warning-surface-hover: var(--color-canteloupe-500); } } From 8147ce762f837ac60c3b7680bf29e80593c027ff Mon Sep 17 00:00:00 2001 From: Yousif Yassi Date: Wed, 23 Oct 2024 16:44:17 -0400 Subject: [PATCH 10/66] changing ThemeToggle behavior --- .../lib/ThemeToggle/ThemeToggle.module.scss | 12 +++---- .../ui/src/lib/ThemeToggle/ThemeToggle.tsx | 36 ++++++------------- 2 files changed, 15 insertions(+), 33 deletions(-) diff --git a/web/libs/ui/src/lib/ThemeToggle/ThemeToggle.module.scss b/web/libs/ui/src/lib/ThemeToggle/ThemeToggle.module.scss index cbd2fba42a33..48082e8abfd0 100644 --- a/web/libs/ui/src/lib/ThemeToggle/ThemeToggle.module.scss +++ b/web/libs/ui/src/lib/ThemeToggle/ThemeToggle.module.scss @@ -1,14 +1,8 @@ .themeToggle { - display: flex; - align-items: center; - justify-content: center; - transition: outline 0.1s ease; -} - -.themeOption { display: flex; justify-content: center; align-self: stretch; + transition: outline 0.1s ease; &__label { display: flex; @@ -21,4 +15,8 @@ height: 100%; align-items: center; } +} + +.animationWrapper { + // do something here } \ No newline at end of file diff --git a/web/libs/ui/src/lib/ThemeToggle/ThemeToggle.tsx b/web/libs/ui/src/lib/ThemeToggle/ThemeToggle.tsx index b14909973f4c..75e2fe686fa6 100644 --- a/web/libs/ui/src/lib/ThemeToggle/ThemeToggle.tsx +++ b/web/libs/ui/src/lib/ThemeToggle/ThemeToggle.tsx @@ -1,24 +1,11 @@ import { clsx } from "clsx"; import styles from "./ThemeToggle.module.scss"; -import MultiStateToggle from "../MultiStateToggle/MultiStateToggle"; -import { useEffect, useMemo, useState } from "react"; +import { useCallback, useEffect, useMemo, useState } from "react"; import { ReactComponent as Sun } from "./icons/sun.svg"; import { ReactComponent as Moon } from "./icons/moon.svg"; const THEME_OPTIONS = ["Auto", "Light", "Dark"]; const PREFERRED_COLOR_SCHEME_KEY = "preferred-color-scheme"; -export interface ThemeToggleOption { - label?: string; - icon?: string; -} -const ThemeOption = ({ label, icon }: ThemeToggleOption) => { - return ( -
-
{icon === "Dark" ? : }
-
{label}
-
- ); -}; export const ThemeToggle = () => { const presetTheme = window.localStorage.getItem(PREFERRED_COLOR_SCHEME_KEY) ?? THEME_OPTIONS[0]; const [theme, setTheme] = useState(presetTheme); @@ -33,7 +20,7 @@ export const ThemeToggle = () => { document.documentElement.setAttribute("data-color-scheme", appliedTheme.toLowerCase()); }, [appliedTheme]); - const themeChanged = (theme: string) => { + const themeChanged = useCallback(() => { const length = THEME_OPTIONS.length; const index = (THEME_OPTIONS.indexOf(theme) + 1) % length; const nextTheme = THEME_OPTIONS[index]; @@ -41,19 +28,16 @@ export const ThemeToggle = () => { window.localStorage.setItem(PREFERRED_COLOR_SCHEME_KEY, nextTheme); setTheme(nextTheme); setAppliedTheme(nextTheme === "Auto" ? systemMode : nextTheme); - }; + }, [theme]); return ( -
- ({ - value: option, - label: , - }))} - selectedOption={theme} - onChange={themeChanged} - /> -
+ ); }; From c54d818d826a2bada41bc425fed3a83d200c1a18 Mon Sep 17 00:00:00 2001 From: Yousif Yassi Date: Wed, 23 Oct 2024 16:57:15 -0400 Subject: [PATCH 11/66] lint cleanup --- .../labelstudio/src/components/Form/Elements/Input/Input.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/apps/labelstudio/src/components/Form/Elements/Input/Input.scss b/web/apps/labelstudio/src/components/Form/Elements/Input/Input.scss index 5a125286d877..b7ab599c7670 100644 --- a/web/apps/labelstudio/src/components/Form/Elements/Input/Input.scss +++ b/web/apps/labelstudio/src/components/Form/Elements/Input/Input.scss @@ -18,7 +18,7 @@ color: var(--color-neutral-content-subtler); } - &:hover:not(.disabled):not([disabled]) { + &:hover:not(.disabled, [disabled]) { border-color: var(--color-neutral-border-bolder); } From 00bb28734cf5eb76e451d5910b2bffbfeee21a5e Mon Sep 17 00:00:00 2001 From: Ricardo Cabral Date: Thu, 24 Oct 2024 01:10:39 -0400 Subject: [PATCH 12/66] Replaces variables across multiple files. Replaces some existing styles. --- label_studio/core/static/css/login.css | 21 +++++++-- .../templates/users/new-ui/user_base.html | 46 +++++++++++++++++-- .../src/components/Button/Button.scss | 2 +- .../Form/Elements/Toggle/Toggle.scss | 6 +-- .../labelstudio/src/components/Form/Form.scss | 4 +- .../Form/Validation/Validation.scss | 2 +- .../labelstudio/src/components/Menu/Menu.scss | 4 +- .../src/components/Menubar/Menubar.scss | 6 ++- .../pages/CreateProject/Config/Config.scss | 2 +- .../Organization/PeoplePage/PeopleList.scss | 2 +- .../src/pages/Projects/Projects.scss | 21 ++++++--- web/libs/datamanager/public/index.html | 4 +- .../datamanager/src/components/App/App.scss | 1 + .../src/components/Common/Button/Button.scss | 28 +++++------ .../components/Common/Dropdown/Dropdown.scss | 6 ++- .../Form/Elements/RadioGroup/RadioGroup.scss | 2 +- .../src/components/Common/Menu/Menu.scss | 15 +++--- .../Common/RadioGroup/RadioGroup.scss | 18 +++++--- .../src/components/Common/Space/Space.scss | 1 + .../src/components/Common/Table/Table.scss | 2 +- .../components/DataManager/DataManager.jsx | 2 +- .../src/components/Filters/Filters.scss | 2 +- .../editor/src/assets/styles/_mixins.scss | 6 +-- web/libs/editor/src/common/Button/Button.scss | 24 +++++----- web/libs/editor/src/common/Toggle/Toggle.scss | 15 +++--- .../src/components/BottomBar/Controls.scss | 10 ++-- .../src/components/Entities/RegionItem.scss | 2 +- .../DetailsPanel/RelationsControls.scss | 6 +-- .../OutlinerPanel/OutlinerPanel.scss | 4 +- .../OutlinerPanel/ViewControls.scss | 2 +- .../SidePanels/TabPanels/PanelTabsBase.scss | 24 +++++----- .../components/SidePanels/TabPanels/Tabs.scss | 10 ++-- .../ui/src/lib/checkbox/checkbox.module.scss | 26 +++++------ web/libs/ui/src/tokens/colors.scss | 45 +++++++++--------- 34 files changed, 224 insertions(+), 147 deletions(-) diff --git a/label_studio/core/static/css/login.css b/label_studio/core/static/css/login.css index 2cf45d18b311..a0f64f83bcd2 100644 --- a/label_studio/core/static/css/login.css +++ b/label_studio/core/static/css/login.css @@ -33,6 +33,18 @@ html, body { background-size: contain; } +.login_page_new_ui .ls-logo { + width: 414px; + height: 64px; + color: var(--color-neutral-content); +} + +.login_page_new_ui .hs-logo { + width: 152px; + height: 22px; + color: var(--color-neutral-content); +} + .login_page_new_ui .left h2 { font-size: 24px; font-weight: 500; @@ -50,7 +62,7 @@ html, body { margin: 8px 0 0 0; } -.login_page_new_ui .left .logo_humansignal{ +.login_page_new_ui .left .by { position: absolute; bottom: 60px; left: 60px; @@ -69,7 +81,7 @@ html, body { .login_page_new_ui .tips { max-width: 520px; border-radius: 8px; - border: 1px solid var(--sand_300); + border: 1px solid var(--color-neutral-border); background: var(--color-neutral-surface); box-shadow: 0 2px 6px 0 rgb(var(--color-neutral-shadow) / 20%); padding: 16px; @@ -85,6 +97,7 @@ html, body { position: absolute; bottom: -72px; left: 16px; + fill: var(--color-neutral-border); background: url('../images/heidi-tip.svg') no-repeat center center; } @@ -193,7 +206,7 @@ html, body { font-family: 'Hellix', sans-serif; } -.login_page_new_ui form button { +.login_page_new_ui form .lsf-button-ls.lsf-button-ls_look_primary { border-radius: 4rem; background: var(--color-neutral-inverted-surface); color: var(--color-neutral-inverted-content); @@ -309,7 +322,7 @@ label{ left: 8px; width: 5px; height: 12px; - border: solid var(--sand_0); + border: solid var(--color-neutral-inverted-surface-content); border-width: 0 2px 2px 0; transform: rotate(45deg); } diff --git a/label_studio/users/templates/users/new-ui/user_base.html b/label_studio/users/templates/users/new-ui/user_base.html index da96520dfccf..13130b672804 100644 --- a/label_studio/users/templates/users/new-ui/user_base.html +++ b/label_studio/users/templates/users/new-ui/user_base.html @@ -20,14 +20,54 @@ {% block content %}