diff --git a/packages/playground/src/home/ItemSectionWithPreviews.tsx b/packages/playground/src/home/ItemSectionWithPreviews.tsx index 4ee5e6a..0ac201a 100644 --- a/packages/playground/src/home/ItemSectionWithPreviews.tsx +++ b/packages/playground/src/home/ItemSectionWithPreviews.tsx @@ -49,7 +49,7 @@ export const ItemSectionWithPreviews = (props: { const SectionHeader = styled.h3<{collapsible: boolean}>` font-family: 'Inter', sans-serif; font-style: normal; - font-weight: 400; + font-weight: normal; font-size: 16px; line-height: 19px; @@ -75,7 +75,7 @@ const ItemDesc = styled.div` font-family: 'Inter', sans-serif; font-style: normal; - font-weight: 600; + font-weight: normal; font-size: 15px; line-height: 18px; @@ -85,7 +85,7 @@ const ItemDesc = styled.div` & > p { margin: 0; - font-weight: 400; + font-weight: normal; font-size: 13px; line-height: 16px; /* identical to box height, or 123% */ diff --git a/packages/playground/src/home/PlaygroundHeader.tsx b/packages/playground/src/home/PlaygroundHeader.tsx index 3a4d5d3..9569317 100644 --- a/packages/playground/src/home/PlaygroundHeader.tsx +++ b/packages/playground/src/home/PlaygroundHeader.tsx @@ -19,9 +19,9 @@ const PlaygroundHeaderVersion = styled.div` background: rgba(34, 103, 99, 0.38); border-radius: 30px; - font-family: 'Source Code Pro', 'Monaco', monospace; + font-family: 'Tonka', 'Monaco', monospace; font-style: normal; - font-weight: 400; + font-weight: normal; font-size: 13px; line-height: 17px; @@ -41,7 +41,7 @@ const HeaderGroup = styled.div` const HeaderLink = styled.a` font-family: 'Inter', sans-serif; font-style: normal; - font-weight: 400; + font-weight: normal; font-size: 16px; line-height: 1; diff --git a/theatre/studio/src/notify.tsx b/theatre/studio/src/notify.tsx index 3946d51..099743a 100644 --- a/theatre/studio/src/notify.tsx +++ b/theatre/studio/src/notify.tsx @@ -100,7 +100,7 @@ const NotificationContainer = styled.div` const NotificationTitle = styled.div` font-size: 14px; - font-weight: bold; + font-weight: normal; color: #fff; ` @@ -127,7 +127,7 @@ const NotificationMessage = styled.div` } strong { - font-weight: bold; + font-weight: normal; color: #d5d5d5; } @@ -159,7 +159,7 @@ const NotificationMessage = styled.div` const DismissButton = styled.button` color: rgba(255, 255, 255, 0.9); - font-weight: 500; + font-weight: normal; display: flex; align-items: center; justify-content: center; diff --git a/theatre/studio/src/panels/BasePanel/common.tsx b/theatre/studio/src/panels/BasePanel/common.tsx index d94acca..e9dd64c 100644 --- a/theatre/studio/src/panels/BasePanel/common.tsx +++ b/theatre/studio/src/panels/BasePanel/common.tsx @@ -54,7 +54,7 @@ export const TitleBar = styled.div` // background-color: #a5a5a5; border-bottom: 1px dashed #91919177; font-size: 10px; - font-weight: 500; + font-weight: normal; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; diff --git a/theatre/studio/src/panels/DetailPanel/DetailPanel.tsx b/theatre/studio/src/panels/DetailPanel/DetailPanel.tsx index 71040ec..2989a4c 100644 --- a/theatre/studio/src/panels/DetailPanel/DetailPanel.tsx +++ b/theatre/studio/src/panels/DetailPanel/DetailPanel.tsx @@ -55,7 +55,7 @@ const Container = styled.div<{pin: boolean}>` const Title = styled.div` margin: 0 10px; color: #000000; - font-weight: bold; + font-weight: normal; font-size: 10px; user-select: none; ${pointerEventsAutoInNormalMode}; diff --git a/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx b/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx index d14bd98..ce14e41 100644 --- a/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx +++ b/theatre/studio/src/panels/OutlinePanel/BaseItem.tsx @@ -85,7 +85,7 @@ const Head_Label = styled.span` ` const Head_IconContainer = styled.div` - font-weight: 500; + font-weight: normal; display: flex; justify-content: center; align-items: center; diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/DeterminePropEditorForSingleKeyframe.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/DeterminePropEditorForSingleKeyframe.tsx index 62e3af1..97400de 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/DeterminePropEditorForSingleKeyframe.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/DeterminePropEditorForSingleKeyframe.tsx @@ -23,13 +23,15 @@ const SingleKeyframePropEditorContainer = styled.div` ` const SingleKeyframePropLabel = styled.div` font-style: normal; - font-weight: 400; + font-weight: normal; font-size: 11px; line-height: 13px; letter-spacing: 0.01em; padding: 6px 6px 6px 0; width: 40%; + font-family: 'Tonka'; + font-variation-settings: 'wght' 500; color: #606060; diff --git a/theatre/studio/src/propEditors/utils/propNameTextCSS.tsx b/theatre/studio/src/propEditors/utils/propNameTextCSS.tsx index 95b97e0..312893f 100644 --- a/theatre/studio/src/propEditors/utils/propNameTextCSS.tsx +++ b/theatre/studio/src/propEditors/utils/propNameTextCSS.tsx @@ -2,7 +2,7 @@ import type {PropHighlighted} from '@theatre/studio/panels/SequenceEditorPanel/w import {css} from 'styled-components' export const propNameTextCSS = css<{isHighlighted?: PropHighlighted}>` - font-weight: 300; + font-weight: normal; font-size: 12px; font-variation-settings: 'wght' 500; color: ${(props) => (props.isHighlighted === 'self' ? '#000000' : '#000000')}; diff --git a/theatre/studio/src/toolbars/GlobalToolbar.tsx b/theatre/studio/src/toolbars/GlobalToolbar.tsx index fb5b616..ced0b6d 100644 --- a/theatre/studio/src/toolbars/GlobalToolbar.tsx +++ b/theatre/studio/src/toolbars/GlobalToolbar.tsx @@ -42,7 +42,9 @@ const NumberOfConflictsIndicator = styled.div` border-radius: 4px; text-align: center; line-height: 14px; - font-weight: 600; + font-family: 'Tonka'; + font-variation-settings: 'wght' 500; + font-weight: normal; font-size: 8px; position: relative; left: -6px; diff --git a/theatre/studio/src/toolbars/MoreMenu/MoreMenu.tsx b/theatre/studio/src/toolbars/MoreMenu/MoreMenu.tsx index ee75ca9..3506403 100644 --- a/theatre/studio/src/toolbars/MoreMenu/MoreMenu.tsx +++ b/theatre/studio/src/toolbars/MoreMenu/MoreMenu.tsx @@ -34,8 +34,10 @@ const Container = styled.div` const Item = styled.div` position: relative; padding: 0px 12px; - font-weight: 400; + font-weight: normal; font-size: 11px; + font-family: 'Tonka'; + font-variation-settings: 'wght' 500; height: 32px; text-decoration: none; user-select: none; @@ -82,7 +84,7 @@ const VersionContainer = styled(Item)` ` const VersionLabel = styled.div` - font-weight: 600; + font-weight: normal; ` const VersionValueRow = styled.div` diff --git a/theatre/studio/src/uiComponents/DetailPanelButton.tsx b/theatre/studio/src/uiComponents/DetailPanelButton.tsx index aca62ee..c4b0adc 100644 --- a/theatre/studio/src/uiComponents/DetailPanelButton.tsx +++ b/theatre/studio/src/uiComponents/DetailPanelButton.tsx @@ -7,7 +7,7 @@ const DetailPanelButton = styled.button<{disabled?: boolean}>` border: 1px solid #627b7b87; background-color: #4b787d3d; color: #eaeaea; - font-weight: 400; + font-weight: normal; display: block; appearance: none; flex-grow: 1; diff --git a/theatre/studio/src/uiComponents/Popover/BasicPopover.tsx b/theatre/studio/src/uiComponents/Popover/BasicPopover.tsx index 168e880..377617c 100644 --- a/theatre/studio/src/uiComponents/Popover/BasicPopover.tsx +++ b/theatre/studio/src/uiComponents/Popover/BasicPopover.tsx @@ -5,13 +5,13 @@ import React from 'react' import styled from 'styled-components' import PopoverArrow from './PopoverArrow' -export const popoverBackgroundColor = transparentize(0.08, `#999999`) +export const popoverBackgroundColor = transparentize(0.09, `#b4b4b4`) const Container = styled.div` position: absolute; --popover-bg: ${popoverBackgroundColor}; - --popover-inner-stroke: #505159; - --popover-outer-stroke: #111; + --popover-inner-stroke: transparent; + --popover-outer-stroke: transparent; background: var(--popover-bg); diff --git a/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx b/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx index 65d64c7..511419f 100644 --- a/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx +++ b/theatre/studio/src/uiComponents/form/BasicNumberInput.tsx @@ -40,7 +40,7 @@ const Container = styled.div` ` const Input = styled.input` - background: rgba(255, 255, 255, 1); + background: rgb(255, 255, 255); border: none; color: rgba(0, 0, 0, 1); padding: 3px 6px 1px 6px; diff --git a/theatre/studio/src/uiComponents/simpleContextMenu/ContextMenu/BaseMenu.tsx b/theatre/studio/src/uiComponents/simpleContextMenu/ContextMenu/BaseMenu.tsx index 820da75..c58207d 100644 --- a/theatre/studio/src/uiComponents/simpleContextMenu/ContextMenu/BaseMenu.tsx +++ b/theatre/studio/src/uiComponents/simpleContextMenu/ContextMenu/BaseMenu.tsx @@ -29,8 +29,10 @@ const MenuTitle = styled.div` padding: 4px 10px; border-bottom: 1px solid #6262626d; color: #000000; + font-family: 'Tonka'; + font-variation-settings: 'wght' 500; font-size: 11px; - font-weight: 500; + font-weight: normal; ` type MenuItem = { diff --git a/theatre/studio/src/uiComponents/simpleContextMenu/ContextMenu/Item.tsx b/theatre/studio/src/uiComponents/simpleContextMenu/ContextMenu/Item.tsx index bdf2e09..31b8526 100644 --- a/theatre/studio/src/uiComponents/simpleContextMenu/ContextMenu/Item.tsx +++ b/theatre/studio/src/uiComponents/simpleContextMenu/ContextMenu/Item.tsx @@ -12,7 +12,7 @@ const ItemContainer = styled.li<{enabled: boolean}>` display: flex; align-items: center; font-size: 11px; - font-weight: 400; + font-weight: normal; position: relative; font-family: 'Tonka'; font-variation-settings: 'wght' 800; diff --git a/theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx b/theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx index 55b7d89..affec61 100644 --- a/theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx +++ b/theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx @@ -14,7 +14,7 @@ export const Container = styled.button` align-items: center; justify-content: center; font-size: 14px; - font-weight: 600; + font-weight: normal; width: 32px; height: 32px; outline: none;