@charcoal-ui/react 6.0.0-beta.1 → 6.0.0-rc.0

package/src/components/TextArea/index.css

@@ -9,11 +9,14 @@
 }
 
 .charcoal-text-area-container {
+  /* Runtime variable overridden by the React component. */
+  --charcoal-text-area-rows: 4;
+
   position: relative;
   overflow: hidden;
 
-  color: var(--charcoal-text2);
-  background-color: var(--charcoal-surface3);
+  color: var(--charcoal-color-text-secondary-default);
+  background-color: var(--charcoal-color-container-secondary-default-a);
   border-radius: 4px;
   transition:
     0.2s background-color,
@@ -30,7 +33,7 @@
   }
 
   &:not([aria-disabled='true']):hover {
-    background-color: var(--charcoal-surface3-hover);
+    background-color: var(--charcoal-color-container-secondary-hover-a);
   }
 
   &[aria-invalid='true']:focus-within {
@@ -66,7 +69,7 @@
   }
 
   &::placeholder {
-    color: var(--charcoal-text3);
+    color: var(--charcoal-color-text-placeholder-default);
   }
 }
 
@@ -77,5 +80,5 @@
 
   line-height: 22px;
   font-size: 14px;
-  color: var(--charcoal-text3);
+  color: var(--charcoal-color-text-tertiary-default);
 }

package/src/components/TextEllipsis/__snapshots__/index.css.snap

@@ -1,4 +1,7 @@
 .charcoal-text-ellipsis {
+  /* Runtime variables overridden by the React component. */
+  --charcoal-text-ellipsis-line-limit: 1;
+  --charcoal-text-ellipsis-line-height: inherit;
   overflow: hidden;
   overflow-wrap: break-word;
   display: -webkit-box;

package/src/components/TextEllipsis/index.css

@@ -1,4 +1,8 @@
 .charcoal-text-ellipsis {
+  /* Runtime variables overridden by the React component. */
+  --charcoal-text-ellipsis-line-limit: 1;
+  --charcoal-text-ellipsis-line-height: inherit;
+
   overflow: hidden;
   overflow-wrap: break-word;
   display: -webkit-box;

package/src/components/TextField/AssistiveText/index.css

@@ -2,9 +2,9 @@
   font-size: 14px;
   line-height: 22px;
   margin: 0;
-  color: var(--charcoal-text2);
+  color: var(--charcoal-color-text-secondary-default);
 }
 
 .charcoal-text-field-assistive-text[data-invalid='true'] {
-  color: var(--charcoal-assertive);
+  color: var(--charcoal-color-text-negative-default);
 }

package/src/components/TextField/TextField.story.tsx

@@ -79,6 +79,36 @@ export const Invalid: StoryObj<typeof TextField> = {
   },
 }
 
+export const TokenV2: StoryObj<typeof TextField> = {
+  parameters: {
+    tokenVersion: 'v2',
+  },
+  render() {
+    return (
+      <div style={{ display: 'grid', gap: 24, width: 320 }}>
+        <TextField
+          label="Label"
+          showLabel
+          required
+          requiredText="*必須"
+          subLabel={<Clickable>Text Link</Clickable>}
+          placeholder="Placeholder"
+          assistiveText="説明が入ります"
+          showCount
+          maxLength={100}
+        />
+        <TextField
+          label="Invalid"
+          invalid
+          placeholder="Placeholder"
+          assistiveText="エラーメッセージ"
+        />
+        <TextField label="Disabled" disabled value="Disabled value" />
+      </div>
+    )
+  },
+}
+
 export const ReadOnly: StoryObj<typeof TextField> = {
   render() {
     return <TextField label="Label" readOnly value="読み取り専用" />

package/src/components/TextField/__snapshots__/TextField.story.storyshot

@@ -424,7 +424,9 @@ exports[`Storybook Tests > react/TextField > Prefix 1`] = `
             style="display: flex; align-items: center;"
           >
             <pixiv-icon
+              class="charcoal-icon"
               name="16/Search"
+              style="--charcoal-icon-size: 16px;"
             />
           </div>
         </div>

package/src/components/TextField/__snapshots__/index.css.snap

@@ -13,8 +13,8 @@
   height: 40px;
   transition: 0.2s background-color,
     0.2s box-shadow;
-  color: var(--charcoal-text2);
-  background-color: var(--charcoal-surface3);
+  color: var(--charcoal-color-text-secondary-default);
+  background-color: var(--charcoal-color-container-secondary-default-a);
   border-radius: 4px;
   padding: 0 8px;
   line-height: 22px;
@@ -26,7 +26,7 @@
 }
 
 .charcoal-text-field-container:not([aria-disabled='true']):hover {
-  background-color: var(--charcoal-surface3-hover);
+  background-color: var(--charcoal-color-container-secondary-hover-a);
 }
 
 .charcoal-text-field-container:not([aria-disabled='true']):focus-within {
@@ -77,16 +77,16 @@
   /* Display box-shadow for iOS Safari */
   appearance: none;
   background: transparent;
-  color: var(--charcoal-text2);
+  color: var(--charcoal-color-text-secondary-default);
 }
 
 .charcoal-text-field-input::placeholder {
-  color: var(--charcoal-text3);
+  color: var(--charcoal-color-text-placeholder-default);
 }
 
 .charcoal-text-field-line-counter {
   line-height: 22px;
   font-size: 14px;
-  color: var(--charcoal-text3);
+  color: var(--charcoal-color-text-tertiary-default);
 }
 

package/src/components/TextField/index.css

@@ -14,8 +14,8 @@
   transition:
     0.2s background-color,
     0.2s box-shadow;
-  color: var(--charcoal-text2);
-  background-color: var(--charcoal-surface3);
+  color: var(--charcoal-color-text-secondary-default);
+  background-color: var(--charcoal-color-container-secondary-default-a);
   border-radius: 4px;
   padding: 0 8px;
   line-height: 22px;
@@ -26,7 +26,7 @@
   }
 
   &:not([aria-disabled='true']):hover {
-    background-color: var(--charcoal-surface3-hover);
+    background-color: var(--charcoal-color-container-secondary-hover-a);
   }
 
   &:not([aria-disabled='true']):focus-within {
@@ -79,15 +79,15 @@
   appearance: none;
   background: transparent;
 
-  color: var(--charcoal-text2);
+  color: var(--charcoal-color-text-secondary-default);
 
   &::placeholder {
-    color: var(--charcoal-text3);
+    color: var(--charcoal-color-text-placeholder-default);
   }
 }
 
 .charcoal-text-field-line-counter {
   line-height: 22px;
   font-size: 14px;
-  color: var(--charcoal-text3);
+  color: var(--charcoal-color-text-tertiary-default);
 }