From 386bdd026bbe2fffeee4b8f6cc3db43eccd8a7dd Mon Sep 17 00:00:00 2001 From: asuk Date: Fri, 22 Sep 2023 13:32:53 +0200 Subject: [PATCH] css changes --- theatre/studio/src/panels/BasePanel/PanelWrapper.tsx | 1 + .../DeterminePropEditorForDetail/SingleRowPropEditor.tsx | 1 + theatre/studio/src/panels/OutlinePanel/BaseItem.tsx | 3 ++- theatre/studio/src/propEditors/utils/propNameTextCSS.tsx | 2 +- theatre/studio/src/uiComponents/form/BasicNumberInput.tsx | 2 +- theatre/studio/src/uiComponents/form/BasicSelect.tsx | 1 + theatre/studio/src/uiComponents/form/BasicStringInput.tsx | 2 +- .../src/uiComponents/simpleContextMenu/ContextMenu/Item.tsx | 1 + 8 files changed, 9 insertions(+), 4 deletions(-) diff --git a/theatre/studio/src/panels/BasePanel/PanelWrapper.tsx b/theatre/studio/src/panels/BasePanel/PanelWrapper.tsx index 350321d..2a0f00a 100644 --- a/theatre/studio/src/panels/BasePanel/PanelWrapper.tsx +++ b/theatre/studio/src/panels/BasePanel/PanelWrapper.tsx @@ -9,6 +9,7 @@ const Container = styled.div` user-select: none; box-sizing: border-box; font-family: 'Tonka'; + font-variation-settings: 'wght' 800; ${pointerEventsAutoInNormalMode}; /* box-shadow: 1px 2px 10px -5px black; */ diff --git a/theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/SingleRowPropEditor.tsx b/theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/SingleRowPropEditor.tsx index 8d6b893..19c5baa 100644 --- a/theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/SingleRowPropEditor.tsx +++ b/theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/SingleRowPropEditor.tsx @@ -89,6 +89,7 @@ const InputContainer = styled.div` flex-grow: 0; padding-bottom: 4px; padding-top: 4px; + font-variation-settings: 'wght' 800; ` type ISingleRowPropEditorProps = { diff --git a/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx b/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx index 1743481..d14bd98 100644 --- a/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx +++ b/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx @@ -32,6 +32,7 @@ const Header = styled(BaseHeader)` pointer-events: none; white-space: nowrap; font-family: 'Tonka'; + font-variation-settings: 'wght' 800; /*box-shadow: 0 3px 4px -1px rgba(0, 0, 0, 0.48);*/ color: rgba(0, 0, 0, 0.8); @@ -64,7 +65,7 @@ const Header = styled(BaseHeader)` ` export const outlineItemFont = css` - font-weight: 500; + font-variation-settings: 'wght' 800; font-size: 12px; & { } diff --git a/theatre/studio/src/propEditors/utils/propNameTextCSS.tsx b/theatre/studio/src/propEditors/utils/propNameTextCSS.tsx index e041d50..95b97e0 100644 --- a/theatre/studio/src/propEditors/utils/propNameTextCSS.tsx +++ b/theatre/studio/src/propEditors/utils/propNameTextCSS.tsx @@ -4,6 +4,6 @@ import {css} from 'styled-components' export const propNameTextCSS = css<{isHighlighted?: PropHighlighted}>` font-weight: 300; font-size: 12px; - font-variation-settings: 'wght' 130; + font-variation-settings: 'wght' 500; color: ${(props) => (props.isHighlighted === 'self' ? '#000000' : '#000000')}; ` diff --git a/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx b/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx index 056cb10..65d64c7 100644 --- a/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx +++ b/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx @@ -53,7 +53,7 @@ const Input = styled.input` border-radius: 0px; margin-bottom: 0px; text-align: center; - font-variation-settings: 'wght' 200; + font-variation-settings: 'wght' 700; &:focus { cursor: text; diff --git a/theatre/studio/src/uiComponents/form/BasicSelect.tsx b/theatre/studio/src/uiComponents/form/BasicSelect.tsx index 9c3a3fd..9ed1a96 100644 --- a/theatre/studio/src/uiComponents/form/BasicSelect.tsx +++ b/theatre/studio/src/uiComponents/form/BasicSelect.tsx @@ -32,6 +32,7 @@ const Select = styled.select` text-align: left; width: 100%; border-radius: 0px; + font-variation-settings: 'wght' 700; /* looks like putting percentages in the height of a select box doesn't work in Firefox. Not sure why. So we're hard-coding the height to 26px, unlike all other inputs that use a relative height. diff --git a/theatre/studio/src/uiComponents/form/BasicStringInput.tsx b/theatre/studio/src/uiComponents/form/BasicStringInput.tsx index 527807a..4dd2f0d 100644 --- a/theatre/studio/src/uiComponents/form/BasicStringInput.tsx +++ b/theatre/studio/src/uiComponents/form/BasicStringInput.tsx @@ -21,7 +21,7 @@ const StyledTextarea = styled.textarea.attrs({type: 'text'})` box-sizing: border-box; margin-bottom: 10px; margin-top: 10px; - font-variation-settings: 'wght' 200; + font-variation-settings: 'wght' 700; &:hover { background-color: #10101042; diff --git a/theatre/studio/src/uiComponents/simpleContextMenu/ContextMenu/Item.tsx b/theatre/studio/src/uiComponents/simpleContextMenu/ContextMenu/Item.tsx index a56d667..bdf2e09 100644 --- a/theatre/studio/src/uiComponents/simpleContextMenu/ContextMenu/Item.tsx +++ b/theatre/studio/src/uiComponents/simpleContextMenu/ContextMenu/Item.tsx @@ -15,6 +15,7 @@ const ItemContainer = styled.li<{enabled: boolean}>` font-weight: 400; position: relative; font-family: 'Tonka'; + font-variation-settings: 'wght' 800; text-transform: uppercase; color: ${(props) => (props.enabled ? 'white' : '#484848')}; cursor: ${(props) => (props.enabled ? 'normal' : 'not-allowed')};