pixiv · naporin0624 · Jan 29, 2025 · Jan 29, 2025 · Jan 29, 2025 · Feb 5, 2025
diff --git a/package.json b/package.json
@@ -80,7 +80,6 @@
     "@types/node": "^18.19.59",
     "@types/prettier": "^2.4.3",
     "@types/react": "^18.3.3",
-    "@types/styled-components": "^5.1.21",
     "@types/webpack": "^5.28.0",
     "@typescript-eslint/eslint-plugin": "^5.55.0",
     "@typescript-eslint/parser": "^5.55.0",
@@ -119,7 +118,7 @@
     "storybook": "^8.0.5",
     "storybook-dark-mode": "^4.0.2",
     "style-loader": "^3.3.4",
-    "styled-components": "^5.3.3",
+    "styled-components": "^6.1.12",
     "stylelint": "^14.3.0",
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-recommended": "^6.0.0",
@@ -153,6 +152,9 @@
       "core-js",
       "esbuild",
       "nx"
-    ]
+    ],
+    "overrides": {
+      "@types/react": "18.3.3"
+    }
   }
 }
diff --git a/packages/icons/package.json b/packages/icons/package.json
@@ -23,15 +23,14 @@
   "devDependencies": {
     "@storybook/react": "^8.5.5",
     "@types/react": "^18.3.3",
-    "@types/styled-components": "^5.1.21",
     "@types/warning": "^3.0.0",
     "@types/webpack-env": "^1.18.8",
     "@vitejs/plugin-react": "^4.3.1",
     "jsdom": "^24.1.0",
     "npm-run-all": "^4.1.5",
     "react": "^18.3.1",
     "rimraf": "^3.0.2",
-    "styled-components": "^5.3.11",
+    "styled-components": "^6.1.12",
     "tsup": "^6.5.0",
     "typescript": "^4.9.5",
     "vitest": "^2.0.1"

diff --git a/packages/react-sandbox/package.json b/packages/react-sandbox/package.json
@@ -35,7 +35,6 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/react-router-dom": "^5.3.3",
-    "@types/styled-components": "^5.1.21",
     "@types/warning": "^3.0.0",
     "@vitejs/plugin-react": "^4.3.1",
     "jsdom": "^24.1.0",
@@ -44,7 +43,7 @@
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.2.1",
     "rimraf": "^3.0.2",
-    "styled-components": "^5.3.3",
+    "styled-components": "^6.1.12",
     "tsup": "^6.5.0",
     "typescript": "^4.9.5",
     "use-resize-observer": "^9.1.0",
@@ -61,9 +60,9 @@
     "warning": "^4.0.3"
   },
   "peerDependencies": {
-    "react": ">=17.0.0",
-    "react-dom": ">=17.0.0",
-    "styled-components": ">=5.1.1"
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "styled-components": ">=6.0.0"
   },
   "files": [
     "src",

diff --git a/packages/react-sandbox/src/type.d.ts b/packages/react-sandbox/src/type.d.ts
@@ -1,10 +1,9 @@
-import { ThemeProp } from '@charcoal-ui/styled'
 import { CharcoalTheme } from '@charcoal-ui/theme'
-import type { CSSProp, DefaultTheme } from 'styled-components'
+import type { CSSProp } from 'styled-components'
 
 declare module 'react' {
   interface Attributes {
-    css?: CSSProp<DefaultTheme> | ThemeProp<DefaultTheme>
+    css?: CSSProp
   }
 }
 

diff --git a/packages/react/docs/__snapshots__/TokenV2Demo.story.storyshot b/packages/react/docs/__snapshots__/TokenV2Demo.story.storyshot
@@ -2,12 +2,9 @@
 
 exports[`Storybook Tests > theme/Token v2 Demo > Styled 1`] = `
 .c0 {
-  -webkit-transition: 0.3s color ease-in-out;
   transition: 0.3s color ease-in-out;
   display: grid;
   gap: 24px;
-  max-width: -webkit-fit-content;
-  max-width: -moz-fit-content;
   max-width: fit-content;
 }
 
@@ -58,13 +55,7 @@ exports[`Storybook Tests > theme/Token v2 Demo > Styled 1`] = `
   grid-area: UserInfo;
   display: grid;
   grid-auto-flow: column;
-  -webkit-box-pack: left;
-  -webkit-justify-content: left;
-  -ms-flex-pack: left;
   justify-content: left;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
   align-items: center;
   gap: var(--charcoal-space-layout-20);
 }
@@ -102,8 +93,6 @@ exports[`Storybook Tests > theme/Token v2 Demo > Styled 1`] = `
   cursor: pointer;
   color: var(--charcoal-color-text-tertiary-default);
   text-align: right;
-  -webkit-align-content: center;
-  -ms-flex-line-pack: center;
   align-content: center;
   font-size: var(--charcoal-text-font-size-caption-m);
   line-height: var(--charcoal-text-line-height-caption-m);
@@ -120,7 +109,7 @@ exports[`Storybook Tests > theme/Token v2 Demo > Styled 1`] = `
 .c8 {
   grid-area: ArtworkList;
   display: grid;
-  grid-template-columns: repeat(3,1fr);
+  grid-template-columns: repeat(3, 1fr);
   gap: var(--charcoal-space-layout-20);
   list-style: none;
   padding: 0;
@@ -134,7 +123,7 @@ exports[`Storybook Tests > theme/Token v2 Demo > Styled 1`] = `
 
 .c10 {
   width: 100%;
-  aspect-ratio: 3 / 2;
+  aspect-ratio: 3/2;
   border-radius: var(--charcoal-radius-m);
 }
 

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -81,8 +81,8 @@
     "warning": "^4.0.3"
   },
   "peerDependencies": {
-    "react": ">=17.0.0",
-    "styled-components": ">=5.1.1"
+    "react": ">=18.0.0",
+    "styled-components": ">=6.0.0"
   },
   "files": [
     "src",

diff --git a/packages/react/src/type.d.ts b/packages/react/src/type.d.ts
@@ -1,7 +1,8 @@
 import 'react'
 
+// Also augment React's CSSProperties for direct usage
 declare module 'react' {
   interface CSSProperties {
-    [key: `--${string}`]: string | number
+    [key: `--${string}`]: string | number | undefined
   }
 }
diff --git a/packages/styled/package.json b/packages/styled/package.json
@@ -23,15 +23,14 @@
   "devDependencies": {
     "@charcoal-ui/react": "workspace:*",
     "@types/react": "^18.3.3",
-    "@types/styled-components": "^5.1.21",
     "@types/warning": "^3.0.0",
     "@vitejs/plugin-react": "^4.3.1",
     "jest-styled-components": "^7.1.1",
     "jsdom": "^24.1.0",
     "npm-run-all": "^4.1.5",
     "react": "^18.3.1",
     "rimraf": "^3.0.2",
-    "styled-components": "^5.3.3",
+    "styled-components": "^6.1.12",
     "tsup": "^6.5.0",
     "typescript": "^4.9.5",
     "vitest": "^2.0.2"
@@ -43,9 +42,9 @@
     "warning": "^4.0.3"
   },
   "peerDependencies": {
-    "@charcoal-ui/react": "workspace:*",
-    "react": ">=17.0.0",
-    "styled-components": ">=5.1.1"
+    "react": ">=18.0.0",
+    "styled-components": ">=6.0.0",
+    "@charcoal-ui/react": "workspace:*"
   },
   "files": [
     "src",

diff --git a/packages/styled/src/__snapshots__/addThemeUtils.story.storyshot b/packages/styled/src/__snapshots__/addThemeUtils.story.storyshot
@@ -4,23 +4,18 @@ exports[`Storybook Tests > styled/addThemeUtils > Example 1`] = `
 .c0 {
   gap: 40px;
   color: #1f1f1f;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
   flex-direction: column;
   white-space: nowrap;
-  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas, 'Liberation Mono','Courier New',monospace;
+  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;
 }
 
 .c4 {
   margin: 0;
 }
 
 .c5 {
-  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas, 'Liberation Mono','Courier New',monospace;
+  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;
 }
 
 .c2 {
@@ -56,9 +51,6 @@ exports[`Storybook Tests > styled/addThemeUtils > Example 1`] = `
 
 .c1 {
   box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
   background-color: #ffffff;
   border: 1px solid rgba(0,0,0,0.08);
@@ -67,16 +59,14 @@ exports[`Storybook Tests > styled/addThemeUtils > Example 1`] = `
 }
 
 .c6 {
-  box-shadow: 0 0 0 4px rgba(255,43,0,0.32);
+  box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
   margin: 8px;
-  -webkit-transition: 0.2s box-shadow;
   transition: 0.2s box-shadow;
 }
 
 .c7 {
   padding: 0px 16px;
   margin: 16px;
-  -webkit-transition: 0.2s box-shadow;
   transition: 0.2s box-shadow;
   cursor: pointer;
   height: 40px;
@@ -88,15 +78,15 @@ exports[`Storybook Tests > styled/addThemeUtils > Example 1`] = `
 
 .c7:focus {
   outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
 }
 
 .c7:focus:not(:focus-visible) {
   box-shadow: none;
 }
 
 .c7:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
 }
 
 .c7:disabled,
@@ -105,7 +95,7 @@ exports[`Storybook Tests > styled/addThemeUtils > Example 1`] = `
   cursor: default;
 }
 
-.c7:not(:disabled):active {
+.c7 :not(:disabled):active {
   background-color: var(--charcoal-brand-press);
 }
 

diff --git a/packages/styled/src/__snapshots__/index.test.tsx.snap b/packages/styled/src/__snapshots__/index.test.tsx.snap
@@ -4,23 +4,18 @@ exports[`Story > <Example /> 1`] = `
 .c0 {
   gap: 40px;
   color: #1f1f1f;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
   flex-direction: column;
   white-space: nowrap;
-  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas, 'Liberation Mono','Courier New',monospace;
+  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;
 }
 
 .c4 {
   margin: 0;
 }
 
 .c5 {
-  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas, 'Liberation Mono','Courier New',monospace;
+  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;
 }
 
 .c2 {
@@ -56,9 +51,6 @@ exports[`Story > <Example /> 1`] = `
 
 .c1 {
   box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
   display: flex;
   background-color: #ffffff;
   border: 1px solid rgba(0,0,0,0.08);
@@ -67,16 +59,14 @@ exports[`Story > <Example /> 1`] = `
 }
 
 .c6 {
-  box-shadow: 0 0 0 4px rgba(255,43,0,0.32);
+  box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
   margin: 8px;
-  -webkit-transition: 0.2s box-shadow;
   transition: 0.2s box-shadow;
 }
 
 .c7 {
   padding: 0px 16px;
   margin: 16px;
-  -webkit-transition: 0.2s box-shadow;
   transition: 0.2s box-shadow;
   cursor: pointer;
   height: 40px;
@@ -88,15 +78,15 @@ exports[`Story > <Example /> 1`] = `
 
 .c7:focus {
   outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
 }
 
 .c7:focus:not(:focus-visible) {
   box-shadow: none;
 }
 
 .c7:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
 }
 
 .c7:disabled,
@@ -105,7 +95,7 @@ exports[`Story > <Example /> 1`] = `
   cursor: default;
 }
 
-.c7:not(:disabled):active {
+.c7 :not(:disabled):active {
   background-color: var(--charcoal-brand-press);
 }
 
@@ -191,22 +181,21 @@ exports[`ThemeUtilsTest > <ThemeUtilsTest /> 1`] = `
   gap: 0px;
   gap: 0px 4px;
   row-gap: 0px;
-  -webkit-column-gap: 4px;
   column-gap: 4px;
-  box-shadow: 0 0 0 4px rgba(255,43,0,0.32);
+  box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
 }
 
 .c0:focus {
   outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
 }
 
 .c0:focus:not(:focus-visible) {
   box-shadow: none;
 }
 
 .c0:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+  box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
 }
 
 .c0:disabled,

diff --git a/packages/styled/src/addThemeUtils.story.tsx b/packages/styled/src/addThemeUtils.story.tsx
@@ -1,3 +1,4 @@
+import { light } from '@charcoal-ui/theme'
 import styled, { ThemeProvider } from 'styled-components'
 import { MyTheme, myTheme } from './storyHelper'
 
@@ -10,7 +11,7 @@ declare module 'styled-components' {
 }
 
 export const Example = () => (
-  <ThemeProvider theme={myTheme}>
+  <ThemeProvider theme={(theme) => myTheme(theme ?? light)}>
     <RootDiv>
       <Bg1Div>
         <TypographyDiv>