feat(System): new cluster colors [YTFRONT-4409]

ytsaurus · Oct 25, 2024 · f7cb2c0 · f7cb2c0
1 parent 4b9cab5
commit f7cb2c0
Show file tree

Hide file tree

Showing 8 changed files with 17 additions and 1 deletion.
diff --git a/packages/ui/src/shared/yt-types.d.ts b/packages/ui/src/shared/yt-types.d.ts
@@ -63,7 +63,9 @@ export type ClusterTheme =
     | 'pinkrose'
     | 'lightgray'
     | 'mediumgray'
-    | 'darkgray';
+    | 'darkgray'
+    | 'dornyellow'
+    | 'rubber';
 
 export interface ClusterConfig {
     id: string;

diff --git a/packages/ui/src/ui/appearance.ts b/packages/ui/src/ui/appearance.ts
@@ -17,6 +17,8 @@ export const favicons: Record<ClusterTheme, string> = {
     lightgray: require('./assets/img/favicon-lightgray.png'),
     mediumgray: require('./assets/img/favicon-mediumgray.png'),
     darkgray: require('./assets/img/favicon-darkgray.png'),
+    dornyellow: require('./assets/img/favicon-dorn-yellow.png'),
+    rubber: require('./assets/img/favicon-rubber.png'),
 };
 
 export interface ClusterAppearance {

diff --git a/packages/ui/src/ui/assets/img/favicon-dorn-yellow.png b/packages/ui/src/ui/assets/img/favicon-dorn-yellow.png
diff --git a/packages/ui/src/ui/assets/img/favicon-rubber.png b/packages/ui/src/ui/assets/img/favicon-rubber.png
diff --git a/packages/ui/src/ui/containers/ClusterPageHeader/ClusterColor.scss b/packages/ui/src/ui/containers/ClusterPageHeader/ClusterColor.scss
@@ -43,4 +43,10 @@
     &_theme_darkgray {
         --cluster-color: var(--darkgray-color);
     }
+    &_theme_rubber {
+        --cluster-color: var(--rubber-color);
+    }
+    &_theme_dornyellow {
+        --cluster-color: var(--dornyellow-color);
+    }
 }
diff --git a/packages/ui/src/ui/pages/operations/OperationDetail/OperationDetail.scss b/packages/ui/src/ui/pages/operations/OperationDetail/OperationDetail.scss
@@ -84,6 +84,8 @@
     @include redefinition('bittersweet', var(--bittersweet-color));
     @include redefinition('sunflower', var(--sunflower-color));
     @include redefinition('mediumgray', var(--mediumgray-color));
+    @include redefinition('dornyellow', var(--dornyellow-color));
+    @include redefinition('rubber', var(--rubber-color));
 
     &__attributes,
     &__statistics,

diff --git a/packages/ui/src/ui/styles/themes/dark-theme.scss b/packages/ui/src/ui/styles/themes/dark-theme.scss
@@ -105,6 +105,8 @@
     --pinkrose-color: #d770ad;
     --mediumgray-color: #7f8285;
     --darkgray-color: #434445;
+    --rubber-color: #855D39;
+    --dornyellow-color: #FFF201;
 
     --checkbox-icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iI0MwQzBDMiI+PHBhdGggZD0iTTEzLjc5NSAxTDUuNzkgMTIuNTI3IDIuMDM2IDguNTAzIDEgOS43NzMgNS45MTcgMTUgMTUgMi4xMTIgMTMuNzk1IDF6Ii8+PC9zdmc+');
 }

diff --git a/packages/ui/src/ui/styles/themes/light-theme.scss b/packages/ui/src/ui/styles/themes/light-theme.scss
@@ -105,6 +105,8 @@
     --pinkrose-color: #d770ad;
     --mediumgray-color: #7f8285;
     --darkgray-color: #434445;
+    --rubber-color: #855D39;
+    --dornyellow-color: #FFF201;
 
     --checkbox-icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iMDAwMDAwIj48cGF0aCBkPSJNMTMuNzk1IDFMNS43OSAxMi41MjcgMi4wMzYgOC41MDMgMSA5Ljc3MyA1LjkxNyAxNSAxNSAyLjExMiAxMy43OTUgMXoiLz48L3N2Zz4=');
 }