@charcoal-ui/react 3.4.0 → 3.6.0

package/src/components/SegmentedControl/index.tsx

@@ -7,11 +7,9 @@ import {
   useRadio,
   useRadioGroup,
 } from '@react-aria/radio'
-import styled from 'styled-components'
-import { disabledSelector } from '@charcoal-ui/utils'
+import styled, { css } from 'styled-components'
 
 import { RadioProvider, useRadioContext } from './RadioGroupContext'
-import { theme } from '../../styled'
 
 type SegmentedControlItem = {
   label: React.ReactNode
@@ -120,7 +118,8 @@ const SegmentedControlRoot = styled.div`
   display: inline-flex;
   align-items: center;
 
-  ${theme((o) => [o.bg.surface3, o.borderRadius(16)])}
+  background-color: var(--charcoal-surface3);
+  border-radius: 16px;
 `
 
 const SegmentedRoot = styled.label<{ checked?: boolean }>`
@@ -130,18 +129,22 @@ const SegmentedRoot = styled.label<{ checked?: boolean }>`
   cursor: pointer;
   height: 32px;
 
-  ${disabledSelector} {
+  padding-right: 16px;
+  padding-left: 16px;
+  border-radius: 16px;
+  &:disabled,
+  &[aria-disabled]:not([aria-disabled='false']) {
     cursor: default;
+    opacity: 0.32;
   }
-
-  ${({ checked }) =>
-    theme((o) => [
-      o.padding.horizontal(16),
-      o.borderRadius(16),
-      o.disabled,
-      checked === true && o.bg.brand,
-      checked === true ? o.font.text5 : o.font.text2,
-    ])}
+  color: var(--charcoal-text2);
+
+  ${({ checked = false }) =>
+    checked &&
+    css`
+      background-color: var(--charcoal-brand);
+      color: var(--charcoal-text5);
+    `}
 `
 const SegmentedInput = styled.input`
   position: absolute;
@@ -165,5 +168,22 @@ const RadioLabel = styled.div`
   height: 22px;
 `
 const SegmentedLabelInner = styled.div`
-  ${theme((o) => [o.typography(14)])}
+  font-size: 14px;
+  line-height: 22px;
+  display: flow-root;
+
+  &::before {
+    display: block;
+    width: 0;
+    height: 0;
+    content: '';
+    margin-top: -4px;
+  }
+  &::after {
+    display: block;
+    width: 0;
+    height: 0;
+    content: '';
+    margin-bottom: -4px;
+  }
 `

package/src/components/Switch/__snapshots__/index.story.storyshot

@@ -13,19 +13,15 @@ exports[`Storyshots Switch Labelled 1`] = `
 }
 
 .c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
+.c0[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
+  cursor: default;
 }
 
 .c0:active > input {
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
 .c2 {
   font-size: 14px;
   line-height: 22px;
@@ -168,19 +164,15 @@ exports[`Storyshots Switch Playground 1`] = `
 }
 
 .c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
+.c0[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
+  cursor: default;
 }
 
 .c0:active > input {
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
 .c2 {
   font-size: 14px;
   line-height: 22px;
@@ -322,19 +314,15 @@ exports[`Storyshots Switch Unlabelled 1`] = `
 }
 
 .c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
+.c0[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
+  cursor: default;
 }
 
 .c0:active > input {
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
 .c1 {
   -webkit-appearance: none;
   -moz-appearance: none;

package/src/components/Switch/index.tsx

@@ -4,8 +4,6 @@ import { useMemo, memo, forwardRef } from 'react'
 import * as React from 'react'
 import { useToggleState } from 'react-stately'
 import styled from 'styled-components'
-import { theme } from '../../styled'
-import { disabledSelector } from '@charcoal-ui/utils'
 import { useObjectRef } from '@react-aria/utils'
 
 export type SwitchProps = {
@@ -68,28 +66,25 @@ const Label = styled.label`
   cursor: pointer;
   outline: 0;
 
-  ${theme((o) => o.disabled)}
+  &:disabled,
+  &[aria-disabled]:not([aria-disabled='false']) {
+    opacity: 0.32;
+    cursor: default;
+  }
 
   :active > input {
     box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
   }
-
-  ${disabledSelector} {
-    cursor: default;
-  }
 `
 
 const LabelInner = styled.div`
-  ${theme((o) => [
-    o.typography(14).preserveHalfLeading,
-    o.font.text2,
-    o.margin.left(4),
-  ])}
+  font-size: 14px;
+  line-height: 22px;
+  color: var(--charcoal-text2);
+  margin-left: 4px;
 `
 
-const SwitchInput = styled.input.attrs({
-  type: 'checkbox',
-})`
+const SwitchInput = styled.input.attrs({ type: 'checkbox' })`
   appearance: none;
   display: inline-flex;
   position: relative;

package/src/components/TagItem/__snapshots__/index.story.storyshot

@@ -30,36 +30,19 @@ exports[`Storyshots TagItem Default 1`] = `
 }
 
 .c0:not(:disabled):not([aria-disabled]):focus,
-.c0[aria-disabled=false]:focus,
+.c0[aria-disabled='false']:focus,
 .c0:not(:disabled):not([aria-disabled]):active,
-.c0[aria-disabled=false]:active {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c0:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c0[aria-disabled=false]:focus:not(:focus-visible),
-.c0:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c0[aria-disabled=false]:active:not(:focus-visible) {
-  outline: none;
-}
-
+.c0[aria-disabled='false']:active,
 .c0:not(:disabled):not([aria-disabled]):focus-visible,
-.c0[aria-disabled=false]:focus-visible {
+.c0[aria-disabled='false']:focus-visible {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
 .c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
-.c0:disabled:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]):disabled,
-.c0:disabled[aria-disabled]:not([aria-disabled=false]),
-.c0[aria-disabled]:not([aria-disabled=false])[aria-disabled]:not([aria-disabled=false]) {
+.c0[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
+  cursor: default;
 }
 
 .c1 {
@@ -192,36 +175,19 @@ exports[`Storyshots TagItem Playground 1`] = `
 }
 
 .c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled=false]:focus,
+.c1[aria-disabled='false']:focus,
 .c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled=false]:active {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c1[aria-disabled=false]:focus:not(:focus-visible),
-.c1:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c1[aria-disabled=false]:active:not(:focus-visible) {
-  outline: none;
-}
-
+.c1[aria-disabled='false']:active,
 .c1:not(:disabled):not([aria-disabled]):focus-visible,
-.c1[aria-disabled=false]:focus-visible {
+.c1[aria-disabled='false']:focus-visible {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
 .c1:disabled,
-.c1[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
-.c1:disabled:disabled,
-.c1[aria-disabled]:not([aria-disabled=false]):disabled,
-.c1:disabled[aria-disabled]:not([aria-disabled=false]),
-.c1[aria-disabled]:not([aria-disabled=false])[aria-disabled]:not([aria-disabled=false]) {
+.c1[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
+  cursor: default;
 }
 
 .c8 {
@@ -245,44 +211,27 @@ exports[`Storyshots TagItem Playground 1`] = `
   cursor: pointer;
   overflow: hidden;
   border-radius: 4px;
-  color: var(--charcoal-text5);
-  padding-left: 16px;
   padding-right: 8px;
+  padding-left: 16px;
+  color: var(--charcoal-text5);
   -webkit-transition: 0.2s box-shadow;
   transition: 0.2s box-shadow;
 }
 
 .c8:not(:disabled):not([aria-disabled]):focus,
-.c8[aria-disabled=false]:focus,
+.c8[aria-disabled='false']:focus,
 .c8:not(:disabled):not([aria-disabled]):active,
-.c8[aria-disabled=false]:active {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c8:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c8[aria-disabled=false]:focus:not(:focus-visible),
-.c8:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c8[aria-disabled=false]:active:not(:focus-visible) {
-  outline: none;
-}
-
+.c8[aria-disabled='false']:active,
 .c8:not(:disabled):not([aria-disabled]):focus-visible,
-.c8[aria-disabled=false]:focus-visible {
+.c8[aria-disabled='false']:focus-visible {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
 .c8:disabled,
-.c8[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
-.c8:disabled:disabled,
-.c8[aria-disabled]:not([aria-disabled=false]):disabled,
-.c8:disabled[aria-disabled]:not([aria-disabled=false]),
-.c8[aria-disabled]:not([aria-disabled=false])[aria-disabled]:not([aria-disabled=false]) {
+.c8[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
+  cursor: default;
 }
 
 .c9 {
@@ -314,36 +263,19 @@ exports[`Storyshots TagItem Playground 1`] = `
 }
 
 .c9:not(:disabled):not([aria-disabled]):focus,
-.c9[aria-disabled=false]:focus,
+.c9[aria-disabled='false']:focus,
 .c9:not(:disabled):not([aria-disabled]):active,
-.c9[aria-disabled=false]:active {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c9:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c9[aria-disabled=false]:focus:not(:focus-visible),
-.c9:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c9[aria-disabled=false]:active:not(:focus-visible) {
-  outline: none;
-}
-
+.c9[aria-disabled='false']:active,
 .c9:not(:disabled):not([aria-disabled]):focus-visible,
-.c9[aria-disabled=false]:focus-visible {
+.c9[aria-disabled='false']:focus-visible {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
 .c9:disabled,
-.c9[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
-.c9:disabled:disabled,
-.c9[aria-disabled]:not([aria-disabled=false]):disabled,
-.c9:disabled[aria-disabled]:not([aria-disabled=false]),
-.c9[aria-disabled]:not([aria-disabled=false])[aria-disabled]:not([aria-disabled=false]) {
+.c9[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
+  cursor: default;
 }
 
 .c11 {
@@ -375,36 +307,19 @@ exports[`Storyshots TagItem Playground 1`] = `
 }
 
 .c11:not(:disabled):not([aria-disabled]):focus,
-.c11[aria-disabled=false]:focus,
+.c11[aria-disabled='false']:focus,
 .c11:not(:disabled):not([aria-disabled]):active,
-.c11[aria-disabled=false]:active {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c11:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c11[aria-disabled=false]:focus:not(:focus-visible),
-.c11:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c11[aria-disabled=false]:active:not(:focus-visible) {
-  outline: none;
-}
-
+.c11[aria-disabled='false']:active,
 .c11:not(:disabled):not([aria-disabled]):focus-visible,
-.c11[aria-disabled=false]:focus-visible {
+.c11[aria-disabled='false']:focus-visible {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
 .c11:disabled,
-.c11[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
-.c11:disabled:disabled,
-.c11[aria-disabled]:not([aria-disabled=false]):disabled,
-.c11:disabled[aria-disabled]:not([aria-disabled=false]),
-.c11[aria-disabled]:not([aria-disabled=false])[aria-disabled]:not([aria-disabled=false]) {
+.c11[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
+  cursor: default;
 }
 
 .c12 {
@@ -428,44 +343,27 @@ exports[`Storyshots TagItem Playground 1`] = `
   cursor: pointer;
   overflow: hidden;
   border-radius: 4px;
-  color: var(--charcoal-text5);
-  padding-left: 16px;
   padding-right: 8px;
+  padding-left: 16px;
+  color: var(--charcoal-text5);
   -webkit-transition: 0.2s box-shadow;
   transition: 0.2s box-shadow;
 }
 
 .c12:not(:disabled):not([aria-disabled]):focus,
-.c12[aria-disabled=false]:focus,
+.c12[aria-disabled='false']:focus,
 .c12:not(:disabled):not([aria-disabled]):active,
-.c12[aria-disabled=false]:active {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c12:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c12[aria-disabled=false]:focus:not(:focus-visible),
-.c12:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c12[aria-disabled=false]:active:not(:focus-visible) {
-  outline: none;
-}
-
+.c12[aria-disabled='false']:active,
 .c12:not(:disabled):not([aria-disabled]):focus-visible,
-.c12[aria-disabled=false]:focus-visible {
+.c12[aria-disabled='false']:focus-visible {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
 .c12:disabled,
-.c12[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
-.c12:disabled:disabled,
-.c12[aria-disabled]:not([aria-disabled=false]):disabled,
-.c12:disabled[aria-disabled]:not([aria-disabled=false]),
-.c12[aria-disabled]:not([aria-disabled=false])[aria-disabled]:not([aria-disabled=false]) {
+.c12[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
+  cursor: default;
 }
 
 .c13 {
@@ -497,36 +395,19 @@ exports[`Storyshots TagItem Playground 1`] = `
 }
 
 .c13:not(:disabled):not([aria-disabled]):focus,
-.c13[aria-disabled=false]:focus,
+.c13[aria-disabled='false']:focus,
 .c13:not(:disabled):not([aria-disabled]):active,
-.c13[aria-disabled=false]:active {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c13:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c13[aria-disabled=false]:focus:not(:focus-visible),
-.c13:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c13[aria-disabled=false]:active:not(:focus-visible) {
-  outline: none;
-}
-
+.c13[aria-disabled='false']:active,
 .c13:not(:disabled):not([aria-disabled]):focus-visible,
-.c13[aria-disabled=false]:focus-visible {
+.c13[aria-disabled='false']:focus-visible {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
 .c13:disabled,
-.c13[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
-.c13:disabled:disabled,
-.c13[aria-disabled]:not([aria-disabled=false]):disabled,
-.c13:disabled[aria-disabled]:not([aria-disabled=false]),
-.c13[aria-disabled]:not([aria-disabled=false])[aria-disabled]:not([aria-disabled=false]) {
+.c13[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
+  cursor: default;
 }
 
 .c2 {

package/src/components/TagItem/index.tsx

@@ -1,8 +1,7 @@
 import { forwardRef, memo, useMemo, ComponentPropsWithoutRef } from 'react'
 import { useObjectRef } from '@react-aria/utils'
 import styled, { css } from 'styled-components'
-import { theme } from '../../styled'
-import { disabledSelector, px } from '@charcoal-ui/utils'
+import { px } from '@charcoal-ui/utils'
 import { AriaButtonProps, useButton } from '@react-aria/button'
 import Icon from '../Icon'
 
@@ -82,6 +81,24 @@ export default memo(TagItem)
 type TagItemRootProps = Pick<TagItemProps, 'status'> &
   Required<Pick<TagItemProps, 'size'>>
 
+type Horizontal = {
+  left: number
+  right: number
+}
+const horizontalPadding = ({ left, right }: Horizontal) => css`
+  padding-right: ${px(right)};
+  padding-left: ${px(left)};
+`
+const tagItemRootSize = (size: TagItemProps['size']) => {
+  switch (size) {
+    case 'M':
+      return horizontalPadding({ left: 24, right: 24 })
+    case 'S':
+      return horizontalPadding({ left: 16, right: 16 })
+  }
+}
+const activeTagItemRoot = horizontalPadding({ left: 16, right: 8 })
+
 const TagItemRoot = styled.a<TagItemRootProps>`
   isolation: isolate;
   position: relative;
@@ -92,19 +109,27 @@ const TagItemRoot = styled.a<TagItemRootProps>`
   text-decoration: none;
   cursor: pointer;
   overflow: hidden;
+  border-radius: 4px;
+  ${({ size, status }) => status !== 'active' && tagItemRootSize(size)}
+  ${({ status }) => status === 'active' && activeTagItemRoot}
+  color: ${({ status }) =>
+    status === 'inactive' ? 'var(--charcoal-text2)' : 'var(--charcoal-text5)'};
+
+  transition: 0.2s box-shadow;
+
+  &:not(:disabled):not([aria-disabled]),
+  &[aria-disabled='false'] {
+    &:focus,
+    &:active,
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+    }
+  }
 
-  ${({ size, status }) =>
-    theme((o) => [
-      o.outline.default.focus,
-      o.borderRadius(4),
-      status !== 'active' && size === 'M' && o.padding.horizontal(24),
-      status !== 'active' && size === 'S' && o.padding.horizontal(16),
-      status === 'inactive' ? o.font.text2 : o.font.text5,
-      ...(status === 'active' ? [o.padding.left(16), o.padding.right(8)] : []),
-    ])}
-
-  ${disabledSelector} {
-    ${theme((o) => [o.disabled])}
+  &:disabled,
+  &[aria-disabled]:not([aria-disabled='false']) {
+    opacity: 0.32;
     cursor: default;
   }
 `
@@ -120,12 +145,17 @@ const Background = styled.div<
   height: 100%;
 
   background-color: ${({ bgColor }) => bgColor};
-  ${({ status }) => status === 'inactive' && theme((o) => o.bg.surface3)}
+  ${({ status }) =>
+    status === 'inactive' &&
+    css`
+      background-color: var(--charcoal-surface3);
+    `}
 
   ${({ bgImage }) =>
     bgImage !== undefined &&
     css`
-      ${theme((o) => [o.bg.surface4])}
+      background-color: var(--charcoal-surface4);
+
       &::before {
         content: '';
         position: absolute;
@@ -143,13 +173,31 @@ const Background = styled.div<
 
 const Inner = styled.div`
   display: inline-flex;
-  gap: ${({ theme }) => px(theme.spacing[8])};
+  gap: 8px;
   align-items: center;
   z-index: 2;
 `
 
 const labelCSS = css`
-  ${theme((o) => [o.typography(14).bold])}
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: bold;
+  display: flow-root;
+
+  &::before {
+    display: block;
+    width: 0;
+    height: 0;
+    content: '';
+    margin-top: -4px;
+  }
+  &::after {
+    display: block;
+    width: 0;
+    height: 0;
+    content: '';
+    margin-bottom: -4px;
+  }
 `
 const translateLabelCSS = css`
   display: flex;
@@ -172,5 +220,22 @@ const Label = styled.span`
 `
 
 const TranslatedLabel = styled.div`
-  ${theme((o) => [o.typography(12).bold])}
+  font-size: 12px;
+  line-height: 20px;
+  font-weight: bold;
+  display: flow-root;
+  &::before {
+    display: block;
+    width: 0;
+    height: 0;
+    content: '';
+    margin-top: -4px;
+  }
+  &::after {
+    display: block;
+    width: 0;
+    height: 0;
+    content: '';
+    margin-bottom: -4px;
+  }
 `