@charcoal-ui/react 2.1.0 → 2.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/react",
-  "version": "2.1.0",
+  "version": "2.2.1",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -50,10 +50,10 @@
     "typescript": "^4.5.5"
   },
   "dependencies": {
-    "@charcoal-ui/icons": "^2.1.0",
-    "@charcoal-ui/styled": "^2.1.0",
-    "@charcoal-ui/theme": "^2.1.0",
-    "@charcoal-ui/utils": "^2.1.0",
+    "@charcoal-ui/icons": "^2.2.1",
+    "@charcoal-ui/styled": "^2.2.1",
+    "@charcoal-ui/theme": "^2.2.1",
+    "@charcoal-ui/utils": "^2.2.1",
     "@react-aria/button": "^3.6.3",
     "@react-aria/checkbox": "^3.2.3",
     "@react-aria/dialog": "^3.2.1",
@@ -86,5 +86,5 @@
     "url": "https://github.com/pixiv/charcoal.git",
     "directory": "packages/react"
   },
-  "gitHead": "ad3c5f816dfc2ad8b5d6e3a4102fc664db1d9606"
+  "gitHead": "3da489924e6e4c67f66c13bac76bed95366934d1"
 }

package/src/components/Checkbox/index.tsx

@@ -118,5 +118,5 @@ const CheckboxInputOverlay = styled.div<{ checked?: boolean }>`
 `
 
 const InputLabel = styled.div`
-  ${theme((o) => [o.typography(14)])}
+  ${theme((o) => [o.typography(14), o.font.text2])}
 `

package/src/components/DropdownSelector/Listbox.tsx

@@ -114,6 +114,7 @@ const OptionRoot = styled.li<{ mode?: ListMode }>`
 `
 const OptionCheckIcon = styled(Icon)<{ isSelected: boolean }>`
   visibility: hidden;
+  ${theme((o) => [o.font.text2])}
 
   ${({ isSelected }) =>
     isSelected &&
@@ -123,5 +124,5 @@ const OptionCheckIcon = styled(Icon)<{ isSelected: boolean }>`
 `
 const OptionText = styled.span`
   display: block;
-  ${theme((o) => [o.typography(14)])}
+  ${theme((o) => [o.typography(14), o.font.text2])}
 `

package/src/components/DropdownSelector/index.tsx

@@ -121,7 +121,7 @@ const DropdownSelector = <T extends Record<string, unknown>>({
               : props.placeholder}
           </DropdownButtonText>
 
-          <Icon name="16/Menu" />
+          <DropdownButtonIcon name="16/Menu" />
         </DropdownButton>
         {state.isOpen && (
           <DropdownPopover open={state.isOpen} onClose={() => state.close()}>
@@ -196,12 +196,16 @@ const DropdownButtonText = styled.span`
   ${theme((o) => [o.typography(14), o.font.text2])}
 `
 
+const DropdownButtonIcon = styled(Icon)`
+  ${theme((o) => [o.font.text2])}
+`
+
 const AssertiveText = styled.div<{ invalid: boolean }>`
   ${({ invalid }) =>
     theme((o) => [
       o.typography(14),
       o.margin.top(8),
-      invalid && o.font.assertive,
+      invalid ? o.font.assertive : o.font.text2,
     ])}
 `
 

package/src/components/LoadingSpinner/index.tsx

@@ -1,6 +1,6 @@
-import { transparentize } from 'polished'
 import React, { useImperativeHandle, useRef } from 'react'
 import styled, { keyframes } from 'styled-components'
+import { theme } from '../../styled'
 
 export default function LoadingSpinner({
   size = 48,
@@ -25,11 +25,12 @@ const LoadingSpinnerRoot = styled.div.attrs({ role: 'progressbar' })<{
   font-size: ${(props) => props.size}px;
   width: ${(props) => props.size}px;
   height: ${(props) => props.size}px;
-  background-color: ${({ theme, transparent }) =>
-    transparent
-      ? 'transparent'
-      : transparentize(0.32, theme.color.background1)};
-  color: ${({ theme }) => theme.color.text4};
+  opacity: 0.84;
+  ${({ transparent }) =>
+    theme((o) => [
+      o.font.text4,
+      transparent ? o.bg.transparent : o.bg.background1,
+    ])}
 `
 
 const scaleout = keyframes`

package/src/components/MultiSelect/index.tsx

@@ -93,7 +93,7 @@ const MultiSelectRoot = styled.label`
 const MultiSelectLabel = styled.div`
   display: flex;
   align-items: center;
-  ${theme((o) => [o.typography(14), o.font.text1])}
+  ${theme((o) => [o.typography(14), o.font.text2])}
 `
 
 const MultiSelectInput = styled.input.attrs({ type: 'checkbox' })<{

package/src/components/Radio/index.tsx

@@ -76,6 +76,7 @@ export const RadioInput = styled.input.attrs({ type: 'radio' })<{
     display: block;
     box-sizing: border-box;
 
+    margin: 0;
     padding: 6px;
 
     width: 20px;
@@ -84,14 +85,14 @@ export const RadioInput = styled.input.attrs({ type: 'radio' })<{
     ${({ hasError = false }) =>
       theme((o) => [
         o.borderRadius('oval'),
-        o.bg.text5.hover.press,
+        o.bg.surface1.hover.press,
         hasError && o.outline.assertive,
       ])};
 
     &:not(:checked) {
       border-width: 2px;
       border-style: solid;
-      border-color: ${({ theme }) => theme.color.text4};
+      border-color: ${({ theme }) => theme.color.text3};
     }
 
     &:checked {
@@ -113,7 +114,7 @@ export const RadioInput = styled.input.attrs({ type: 'radio' })<{
 `
 
 const RadioLabel = styled.div`
-  ${theme((o) => [o.typography(14)])}
+  ${theme((o) => [o.typography(14), o.font.text2])}
 `
 
 export type RadioGroupProps = React.PropsWithChildren<{

package/src/components/Switch/index.tsx

@@ -58,6 +58,7 @@ export default function SwitchCheckbox(props: SwitchProps) {
 const Label = styled.label`
   display: inline-grid;
   grid-template-columns: auto 1fr;
+  align-items: center;
   gap: ${({ theme }) => px(theme.spacing[4])};
   cursor: pointer;
   outline: 0;
@@ -70,7 +71,7 @@ const Label = styled.label`
 `
 
 const LabelInner = styled.div`
-  ${theme((o) => o.typography(14))}
+  ${theme((o) => [o.typography(14), o.font.text2])}
 `
 
 const SwitchInput = styled.input.attrs({