fix: sematic typos (#2408)

* fix(docs): sematic -> semantic

* fix(stories): sematic -> semantic

Author: wingkwong

apps/docs/components/docs/components/swatch-colors-set.tsx

@@ -20,7 +20,7 @@ type SwatchColors = {
 
 type SwatchSetProps = {
   colors: SwatchColors[];
-  isSematic?: boolean;
+  isSemantic?: boolean;
 };
 
 const scaleIndexMap: Record<number, string> = {
@@ -90,7 +90,7 @@ const Swatch = ({color, scale}: {color: string; scale?: string}) => {
   );
 };
 
-const SematicSwatch = ({
+const SemanticSwatch = ({
   color,
   className,
   textClassName,
@@ -139,15 +139,15 @@ const SematicSwatch = ({
   );
 };
 
-const SwatchSet = ({colors, isSematic = false}: SwatchSetProps) => (
+const SwatchSet = ({colors, isSemantic = false}: SwatchSetProps) => (
   <div className="flex flex-row flex-wrap items-center justify-center">
     {colors.map(({title, items}) => (
       <div key={title} className="flex flex-col items-start w-full h-full">
         <h2 className="text-xl font-bold text-foreground">{title}</h2>
         <div className="flex flex-row flex-wrap items-center justify-start w-full h-full px-4 py-1">
           {items.map((c, index) =>
-            isSematic ? (
-              <SematicSwatch
+            isSemantic ? (
+              <SemanticSwatch
                 key={`${c.color}-${index}`}
                 className={c.className}
                 color={c.color}
@@ -218,7 +218,7 @@ export const CommonColors = () => {
 export const SemanticColors = () => {
   return (
     <SwatchSet
-      isSematic
+      isSemantic
       colors={[
         {
           title: "Layout",

packages/core/theme/stories/colors.stories.tsx

@@ -17,7 +17,7 @@ type SwatchColors = {
 
 type SwatchSetProps = {
   colors: SwatchColors[];
-  isSematic?: boolean;
+  isSemantic?: boolean;
 };
 
 const Swatch = ({color}: {color: string}) => {
@@ -47,7 +47,7 @@ const Swatch = ({color}: {color: string}) => {
   );
 };
 
-const SematicSwatch = ({
+const SemanticSwatch = ({
   color,
   className,
   textClassName,
@@ -65,15 +65,15 @@ const SematicSwatch = ({
   );
 };
 
-const SwatchSet = ({colors, isSematic = false}: SwatchSetProps) => (
+const SwatchSet = ({colors, isSemantic = false}: SwatchSetProps) => (
   <div className="flex flex-row flex-wrap items-center justify-center w-full h-full p-2">
     {colors.map(({title, items}) => (
       <div key={title} className="flex flex-col items-start w-full h-full">
         <h2 className="text-xl font-bold text-foreground">{title}</h2>
         <div className="flex flex-row flex-wrap items-center justify-start w-full h-full p-4">
           {items.map((c, index) =>
-            isSematic ? (
-              <SematicSwatch
+            isSemantic ? (
+              <SemanticSwatch
                 key={`${c.color}-${index}`}
                 className={c.className}
                 color={c.color}
@@ -93,7 +93,7 @@ export default {
   title: "Foundations/Colors",
   component: SwatchSet,
   argTypes: {
-    isSematic: {
+    isSemantic: {
       control: false,
     },
   },
@@ -146,7 +146,7 @@ export const CommonColors = {
 
 export const SemanticColors = {
   args: {
-    isSematic: true,
+    isSemantic: true,
     colors: [
       {
         title: "Layout",