chore: smarthr-ui-preset のクラス名をケバブケースに統一 (#4032)

* chore: broder-highContrast をケバブケースに変更 * chore: focusIndicator をケバブケースに変更 * chore: Textarea の変更に追従
kufu · Nov 22, 2023 · ce38e29 · ce38e29
1 parent f0a5d79
commit ce38e29
Show file tree

Hide file tree

Showing 11 changed files with 21 additions and 21 deletions.
diff --git a/src/components/Balloon/Balloon.tsx b/src/components/Balloon/Balloon.tsx
@@ -21,7 +21,7 @@ const balloon = tv({
     'after:shr-bg-white',
     'contrast-more:shr-border',
     'contrast-more:shr-border-solid',
-    'contrast-more:shr-border-highContrast',
+    'contrast-more:shr-border-high-contrast',
     'contrast-more:before:shr-block',
     'contrast-more:before:shr-absolute',
     'contrast-more:before:shr-content-[""]',

diff --git a/src/components/Base/Base.tsx b/src/components/Base/Base.tsx
@@ -4,7 +4,7 @@ import { VariantProps, tv } from 'tailwind-variants'
 import type { Gap } from '../../types'
 
 const base = tv({
-  base: 'smarthr-ui-Base shr-bg-white contrast-more:shr-border-highContrast',
+  base: 'smarthr-ui-Base shr-bg-white contrast-more:shr-border-high-contrast',
   variants: {
     paddingBlock: {
       0: 'shr-py-0',

diff --git a/src/components/Button/ButtonWrapper.tsx b/src/components/Button/ButtonWrapper.tsx
@@ -123,8 +123,8 @@ const button = tv({
         'shr-font-inherit',
         'shr-font-bold',
         'shr-leading-none',
-        'focus-visible:shr-focusIndicator',
-        'contrast-more:shr-border-highContrast',
+        'focus-visible:shr-focus-indicator',
+        'contrast-more:shr-border-high-contrast',
         /* baseline より下の leading などの余白を埋める */
         '[&_.smarthr-ui-Icon]:shr-block',
         /** selector list は使えない
@@ -210,10 +210,10 @@ const button = tv({
         'shr-text-black',
         'focus-visible:shr-border-darken',
         'focus-visible:bg-white-darken',
-        'focus-visible:constrast-more:shr-border-highContrast',
+        'focus-visible:constrast-more:shr-border-high-contrast',
         'hover:shr-border-darken',
         'hover:shr-bg-white-darken',
-        'hover:constrast-more:shr-border-highContrast',
+        'hover:constrast-more:shr-border-high-contrast',
       ],
     },
     {

diff --git a/src/components/Button/UnstyledButton.tsx b/src/components/Button/UnstyledButton.tsx
@@ -20,7 +20,7 @@ const unstyledButton = tv({
     'shr-text-inherit',
     'shr-text-left',
     'shr-select-auto',
-    'focus-visible:shr-focusIndicator',
+    'focus-visible:shr-focus-indicator',
   ],
 })
 

diff --git a/src/components/Calendar/CalendarTable.tsx b/src/components/Calendar/CalendarTable.tsx
@@ -35,7 +35,7 @@ const calendarTable = tv({
     isToday: {
       true: {
         dateCell:
-          'shr-border shr-border-solid shr-border-default contrast-more:shr-border-highContrast',
+          'shr-border shr-border-solid shr-border-default contrast-more:shr-border-high-contrast',
       },
     },
     isSelected: {

diff --git a/src/components/CheckBox/CheckBoxInput.tsx b/src/components/CheckBox/CheckBoxInput.tsx
@@ -22,15 +22,15 @@ const checkboxInput = tv({
   slots: {
     box: [
       'shr-pointer-events-none shr-absolute shr-box-border shr-h-full shr-w-full shr-rounded-s shr-border shr-border-solid shr-bg-white',
-      'contrast-more:shr-border-highContrast',
+      'contrast-more:shr-border-high-contrast',
       /* 強制カラーモードのときは、ブラウザ標準のUIを表示する */
       'forced-colors:shr-hidden',
-      'peer-checked:shr-border-main peer-checked:shr-bg-main contrast-more:peer-checked:shr-border-highContrast',
-      'peer-indeterminate:shr-border-main peer-indeterminate:shr-bg-main contrast-more:peer-indeterminate:shr-border-highContrast',
+      'peer-checked:shr-border-main peer-checked:shr-bg-main contrast-more:peer-checked:shr-border-high-contrast',
+      'peer-indeterminate:shr-border-main peer-indeterminate:shr-bg-main contrast-more:peer-indeterminate:shr-border-high-contrast',
       'peer-disabled:shr-border-disabled peer-disabled:shr-bg-white-darken',
       'peer-disabled:peer-checked:shr-border-default peer-disabled:peer-checked:shr-bg-border',
       'peer-disabled:peer-indeterminate:shr-border-default peer-disabled:peer-indeterminate:shr-bg-border',
-      'peer-focus-visible:shr-focusIndicator',
+      'peer-focus-visible:shr-focus-indicator',
       'peer-hover:shr-shadow-input-hover',
     ],
     input: [

diff --git a/src/components/SegmentedControl/SegmentedControl.tsx b/src/components/SegmentedControl/SegmentedControl.tsx
@@ -52,7 +52,7 @@ const segmentedControl = tv({
       'aria-checked:shr-text-white',
       'aria-checked:hover:shr-border-main/50',
       'aria-checked:hover:shr-bg-main/50',
-      'focus-visible:shr-focusIndicator',
+      'focus-visible:shr-focus-indicator',
       'first:shr-rounded-tl-m',
       'first:shr-rounded-bl-m',
       'last:shr-rounded-tr-m',

diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
@@ -48,7 +48,7 @@ const select = tv({
     selectEl: [
       'shr-peer shr-w-full shr-cursor-pointer shr-appearance-none shr-rounded-m shr-border shr-border-solid shr-bg-white shr-text-base shr-leading-none shr-text-black shr-outline-none',
       'hover:shr-bg-white-darken',
-      'focus-visible:shr-focusIndicator',
+      'focus-visible:shr-focus-indicator',
       'disabled:shr-pointer-events-none disabled:shr-bg-white-darken disabled:shr-text-disabled disabled:shr-opacity-100',
       'contrast-more:shr-border-r-highContrast',
       /* padding に依る積み上げでは文字が見切れてしまうため */

diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
@@ -22,9 +22,9 @@ const table = tv({
     'shr-border-spacing-0',
     'shr-bg-column',
     '[&_tbody]:shr-bg-white',
-    '[&_th]:shr-bg-head [&_th]:contrast-more:shr-border [&_th]:contrast-more:shr-border-solid [&_th]:contrast-more:shr-border-highContrast',
-    '[&_td]:contrast-more:shr-border [&_td]:contrast-more:shr-border-solid [&_td]:contrast-more:shr-border-highContrast',
-    'contrast-more:shr-border contrast-more:shr-border-solid contrast-more:shr-border-highContrast',
+    '[&_th]:shr-bg-head [&_th]:contrast-more:shr-border [&_th]:contrast-more:shr-border-solid [&_th]:contrast-more:shr-border-high-contrast',
+    '[&_td]:contrast-more:shr-border [&_td]:contrast-more:shr-border-solid [&_td]:contrast-more:shr-border-high-contrast',
+    'contrast-more:shr-border contrast-more:shr-border-solid contrast-more:shr-border-high-contrast',
   ],
   variants: {
     fixedHead: {

diff --git a/src/components/Textarea/Textarea.tsx b/src/components/Textarea/Textarea.tsx
@@ -57,9 +57,9 @@ const textarea = tv({
   slots: {
     textareaEl: [
       'smarthr-ui-Textarea-textarea shr-box-border shr-rounded-m shr-border shr-border-solid shr-bg-white shr-p-0.5 shr-text-base shr-leading-normal shr-text-black shr-opacity-100',
-      'contrast-more:shr-border-highContrast',
+      'contrast-more:shr-border-high-contrast',
       'placeholder:shr-text-grey',
-      'focus-visible:shr-focusIndicator',
+      'focus-visible:shr-focus-indicator',
       'disabled:shr-pointer-events-none disabled:shr-bg-column disabled:shr-text-disabled disabled:placeholder:shr-text-disabled',
     ],
     counter: 'smarthr-ui-Textarea-counter shr-block shr-text-sm',

diff --git a/src/smarthr-ui-preset.ts b/src/smarthr-ui-preset.ts
@@ -153,7 +153,7 @@ export default {
         default: theme('colors.grey.20'),
         disabled: theme('colors.grey.20 / 50%'),
         darken: darkenColor(theme('colors.grey.20')),
-        highContrast: theme('colors.grey.100'),
+        'high-contrast': theme('colors.grey.100'),
       }),
     },
   },
@@ -188,7 +188,7 @@ export default {
          * box-shadow や ring を使った仕組みでは Firefoxx で欠陥があるため、独自定義している
          * via https://github.com/tailwindlabs/tailwindcss/issues/10226
          */
-        '.focusIndicator': {
+        '.focus-indicator': {
           outline: 'none',
           isolation: 'isolate',
           boxShadow: `0 0 0 2px ${theme('colors.white')}, 0 0 0 4px ${theme('colors.outline')}`,