rename focus ring color

dagster-io · Nov 30, 2023 · d98280d · d98280d
1 parent 29a6060
commit d98280d
Show file tree

Hide file tree

Showing 8 changed files with 16 additions and 15 deletions.
diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/TextInput.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/TextInput.tsx
@@ -9,7 +9,7 @@ import {
   colorBorderDefault,
   colorBorderHover,
   colorBorderDisabled,
-  colorBorderFocused,
+  colorFocusRing,
   colorKeylineDefault,
   colorTextDefault,
   colorTextDisabled,
@@ -134,7 +134,7 @@ export const TextInputStyles = css`
     box-shadow:
       ${colorBorderDefault()} inset 0px 0px 0px 1px,
       ${colorKeylineDefault()} inset 2px 2px 1.5px,
-      ${colorBorderFocused()} 0 0 0 2px;
+      ${colorFocusRing()} 0 0 0 2px;
     outline: none;
   }
 `;
@@ -165,8 +165,9 @@ const StyledInput = styled.input<StyledInputProps>`
   }
 
   :focus {
-    box-shadow: ${({$strokeColor}) => $strokeColor || colorBorderDefault()} 0px 0px 0px 1px,
-    ${colorBorderFocused()} 0 0 0 2px;
+    box-shadow:
+      ${({$strokeColor}) => $strokeColor || colorBorderDefault()} 0px 0px 0px 1px,
+      ${colorFocusRing()} 0 0 0 2px;
     background-color: ${colorBackgroundDefaultHover()};
   }
 `;
@@ -189,7 +190,7 @@ export const TextArea = styled.textarea<TextAreaProps>`
     box-shadow: ${colorBorderHover()} inset 0px 0px 0px 1px;
   }
   :focus {
-    box-shadow: ${colorBorderFocused()} 0px 0px 0px 1px;
+    box-shadow: ${colorFocusRing()} 0px 0px 0px 1px;
     background-color: ${colorBackgroundDefaultHover()};
   }
 

diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/UnstyledButton.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/UnstyledButton.tsx
@@ -1,6 +1,6 @@
 import styled, {css} from 'styled-components';
 
-import {colorTextDefault, colorBorderFocused} from '../theme/color';
+import {colorTextDefault, colorFocusRing} from '../theme/color';
 
 interface Props {
   $expandedClickPx?: number;
@@ -34,7 +34,7 @@ export const UnstyledButton = styled.button<Props>`
     outline: none;
     ${({$showFocusOutline}) =>
       $showFocusOutline
-        ? `box-shadow: ${colorBorderFocused()} 0 0 0 2px;
+        ? `box-shadow: ${colorFocusRing()} 0 0 0 2px;
       `
         : null}
   }

diff --git a/js_modules/dagster-ui/packages/ui-components/src/palettes/ColorName.tsx b/js_modules/dagster-ui/packages/ui-components/src/palettes/ColorName.tsx
@@ -40,7 +40,7 @@ export enum ColorName {
   BorderDefault = 'BorderDefault',
   BorderHover = 'BorderHover',
   BorderDisabled = 'BorderDisabled',
-  BorderFocused = 'BorderFocused',
+  FocusRing = 'FocusRing',
   AccentPrimary = 'AccentPrimary',
   AccentPrimaryHover = 'AccentPrimaryHover',
   AccentReversed = 'AccentReversed',

diff --git a/js_modules/dagster-ui/packages/ui-components/src/palettes/DarkPalette.tsx b/js_modules/dagster-ui/packages/ui-components/src/palettes/DarkPalette.tsx
@@ -43,7 +43,7 @@ export const DarkPalette = {
   [ColorName.BorderDefault]: CoreColors.Gray800,
   [ColorName.BorderHover]: CoreColors.Gray700,
   [ColorName.BorderDisabled]: CoreColors.Gray600,
-  [ColorName.BorderFocused]: CoreColors.Blue700,
+  [ColorName.FocusRing]: CoreColors.Blue700,
   [ColorName.AccentPrimary]: CoreColors.Gray150,
   [ColorName.AccentPrimaryHover]: CoreColors.Gray50,
   [ColorName.AccentReversed]: CoreColors.Gray950,

diff --git a/js_modules/dagster-ui/packages/ui-components/src/palettes/LegacyPalette.tsx b/js_modules/dagster-ui/packages/ui-components/src/palettes/LegacyPalette.tsx
@@ -45,7 +45,7 @@ export const LegacyPalette = {
   [ColorName.BorderDefault]: LegacyColors.Gray300,
   [ColorName.BorderHover]: LegacyColors.Gray200,
   [ColorName.BorderDisabled]: LegacyColors.Gray100,
-  [ColorName.BorderFocused]: LegacyColors.Gray300,
+  [ColorName.FocusRing]: LegacyColors.Blue200,
   [ColorName.AccentPrimary]: LegacyColors.Gray900,
   [ColorName.AccentPrimaryHover]: LegacyColors.Gray800,
   [ColorName.AccentReversed]: LegacyColors.White,

diff --git a/js_modules/dagster-ui/packages/ui-components/src/palettes/LightPalette.tsx b/js_modules/dagster-ui/packages/ui-components/src/palettes/LightPalette.tsx
@@ -44,7 +44,7 @@ export const LightPalette = {
   [ColorName.BorderHover]: CoreColors.Gray300,
   [ColorName.BorderDisabled]: CoreColors.Gray500,
 
-  [ColorName.BorderFocused]: TranslucentColors.Blue30,
+  [ColorName.FocusRing]: TranslucentColors.Blue30,
   [ColorName.AccentPrimary]: CoreColors.Gray950,
   [ColorName.AccentPrimaryHover]: CoreColors.Gray800,
   [ColorName.AccentReversed]: CoreColors.Gray10,

diff --git a/js_modules/dagster-ui/packages/ui-components/src/theme/color.tsx b/js_modules/dagster-ui/packages/ui-components/src/theme/color.tsx
@@ -50,7 +50,7 @@ export const colorBackgroundGrayHover = () => color(ColorName.BackgroundGrayHove
 export const colorBorderDefault = () => color(ColorName.BorderDefault);
 export const colorBorderHover = () => color(ColorName.BorderHover);
 export const colorBorderDisabled = () => color(ColorName.BorderDisabled);
-export const colorBorderFocused = () => color(ColorName.BorderFocused);
+export const colorFocusRing = () => color(ColorName.FocusRing);
 export const colorAccentPrimary = () => color(ColorName.AccentPrimary);
 export const colorAccentPrimaryHover = () => color(ColorName.AccentPrimaryHover);
 export const colorAccentReversed = () => color(ColorName.AccentReversed);

diff --git a/js_modules/dagster-ui/packages/ui-core/src/gantt/GanttChart.tsx b/js_modules/dagster-ui/packages/ui-core/src/gantt/GanttChart.tsx
@@ -10,7 +10,7 @@ import {
   colorBackgroundDefault,
   colorBackgroundGray,
   colorBackgroundYellow,
-  colorBorderFocused,
+  colorFocusRing,
   colorTextYellow,
   FontFamily,
   Group,
@@ -758,10 +758,10 @@ const GanttChartContainer = styled.div`
       box-shadow ${CSS_DURATION}ms linear;
 
     &.focused {
-      box-shadow: 0 0 0 2px ${colorBorderFocused()};
+      box-shadow: 0 0 0 2px ${colorFocusRing()};
     }
     &.hovered {
-      box-shadow: 0 0 0 2px ${colorBorderFocused()};
+      box-shadow: 0 0 0 2px ${colorFocusRing()};
     }
     &.dynamic {
       filter: brightness(115%);