@yakad/ui 1.2.22-beta → 1.2.24-beta

package/appBar/appBar.module.css

@@ -8,7 +8,7 @@
     padding: 0 2rem;
     border-bottom: 0.1rem solid #7d7d7d40;
     background: var(--surfaceColor, #222222);
-    color: var(--onSurfaceColor);
-    fill: var(--onSurfaceColor);
+    color: var(--onSurfaceColor, #ffffff);
+    fill: var(--onSurfaceColor, #ffffff);
     user-select: none;
 }

package/button/button.module.css

@@ -72,19 +72,19 @@
     border: 0.1rem solid #7d7d7d70;
 }
 .filled {
-    background: var(--secondaryColor, #1e64d4);
-    color: var(--onSecondaryColor, #ffffff);
-    fill: var(--onSecondaryColor, #ffffff);
+    background: var(--primaryColor, #1e64d4);
+    color: var(--onPrimaryColor, #ffffff);
+    fill: var(--onPrimaryColor, #ffffff);
 }
 .tonal {
-    background: var(--secondaryContainerColor, #c2e7ff);
-    color: var(--onSecondaryContainerColor, #002021);
-    fill: var(--onSecondaryContainerColor, #002021);
+    background: var(--primaryContainerColor, #c2e7ff);
+    color: var(--onPrimaryContainerColor, #002021);
+    fill: var(--onPrimaryContainerColor, #002021);
 }
 .elevated {
-    background-color: var(--onPrimaryColor, #ffffff);
-    color: var(--surfaceColor, #1e64d4);
-    fill: var(--surfaceColor, #1e64d4);
+    background-color: var(--onSecondaryColor, #ffffff);
+    color: var(--primaryColor, #1e64d4);
+    fill: var(--primaryColor, #1e64d4);
     box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
 }
 .link {
@@ -103,7 +103,7 @@
     height: 0.1rem;
     padding: 0;
     margin: 0 auto;
-    background-color: var(--secondaryColor, #1e64d4);
+    background-color: var(--primaryColor, #1e64d4);
     transition: 0.3s;
 }
 

package/codeField/codeField.module.css

@@ -14,7 +14,7 @@
         )
         0 100%/100% 0.2rem no-repeat;
     color: transparent;
-    text-shadow: 0 0 0 var(--onSurfaceColor);
+    text-shadow: 0 0 0 var(--secondaryColor, #55624c);
     font: 5ch consolas, monospace;
     letter-spacing: 0.5ch;
 }

package/hr/hr.module.css

@@ -4,13 +4,13 @@
     padding: 0;
     margin: 0.5rem auto;
     background: none;
-    border-top: 0.1rem solid var(--secondaryContainerColor, #c2e7ff);
+    border-top: 0.1rem solid var(--primaryContainerColor, #c2e7ff);
 }
 .dotted {
-    border-top: 0.4rem dotted var(--secondaryContainerColor, #c2e7ff);
+    border-top: 0.4rem dotted var(--primaryContainerColor, #c2e7ff);
 }
 .dashed {
-    border-top: 0.2rem dashed var(--secondaryContainerColor, #c2e7ff);
+    border-top: 0.2rem dashed var(--primaryContainerColor, #c2e7ff);
 }
 .shortLine {
     width: 30rem;

package/index.d.ts

@@ -19,4 +19,5 @@ import SvgIcon from "./svgIcon/svgIcon";
 import Loading from "./loading/loading";
 import CodeField from "./codeField/codeField";
 import InputField from "./inputField/inputField";
-export { Button, AppBar, Card, Container, Footer, Form, GridContainer, GridItem, Hr, List, ListItem, Main, Navigation, Page, Row, Stack, Spacer, SvgIcon, Loading, CodeField, InputField, };
+import Thame from "./thame/thame";
+export { Button, AppBar, Card, Container, Footer, Form, GridContainer, GridItem, Hr, List, ListItem, Main, Navigation, Page, Row, Stack, Spacer, SvgIcon, Loading, CodeField, InputField, Thame, };

package/index.js

@@ -19,5 +19,6 @@ import SvgIcon from "./svgIcon/svgIcon";
 import Loading from "./loading/loading";
 import CodeField from "./codeField/codeField";
 import InputField from "./inputField/inputField";
-export { Button, AppBar, Card, Container, Footer, Form, GridContainer, GridItem, Hr, List, ListItem, Main, Navigation, Page, Row, Stack, Spacer, SvgIcon, Loading, CodeField, InputField, };
+import Thame from "./thame/thame";
+export { Button, AppBar, Card, Container, Footer, Form, GridContainer, GridItem, Hr, List, ListItem, Main, Navigation, Page, Row, Stack, Spacer, SvgIcon, Loading, CodeField, InputField, Thame, };
 //# sourceMappingURL=index.js.map

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,IAAI,MAAM,aAAa,CAAC;AAC/B,OAAO,SAAS,MAAM,uBAAuB,CAAC;AAC9C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,IAAI,MAAM,aAAa,CAAC;AAC/B,OAAO,aAAa,MAAM,+BAA+B,CAAC;AAC1D,OAAO,QAAQ,MAAM,qBAAqB,CAAC;AAC3C,OAAO,EAAE,MAAM,SAAS,CAAC;AACzB,OAAO,IAAI,MAAM,aAAa,CAAC;AAC/B,OAAO,QAAQ,MAAM,qBAAqB,CAAC;AAC3C,OAAO,IAAI,MAAM,aAAa,CAAC;AAC/B,OAAO,UAAU,MAAM,yBAAyB,CAAC;AACjD,OAAO,IAAI,MAAM,aAAa,CAAC;AAC/B,OAAO,GAAG,MAAM,WAAW,CAAC;AAC5B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,KAAK,MAAM,eAAe,CAAC;AAClC,OAAO,OAAO,MAAM,mBAAmB,CAAC;AACxC,OAAO,OAAO,MAAM,mBAAmB,CAAC;AACxC,OAAO,SAAS,MAAM,uBAAuB,CAAC;AAC9C,OAAO,UAAU,MAAM,yBAAyB,CAAC;AACjD,OAAO,EACH,MAAM,EACN,MAAM,EACN,IAAI,EACJ,SAAS,EACT,MAAM,EACN,IAAI,EACJ,aAAa,EACb,QAAQ,EACR,EAAE,EACF,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,UAAU,EACV,IAAI,EACJ,GAAG,EACH,KAAK,EACL,MAAM,EACN,OAAO,EACP,OAAO,EACP,SAAS,EACT,UAAU,GACb,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,IAAI,MAAM,aAAa,CAAC;AAC/B,OAAO,SAAS,MAAM,uBAAuB,CAAC;AAC9C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,IAAI,MAAM,aAAa,CAAC;AAC/B,OAAO,aAAa,MAAM,+BAA+B,CAAC;AAC1D,OAAO,QAAQ,MAAM,qBAAqB,CAAC;AAC3C,OAAO,EAAE,MAAM,SAAS,CAAC;AACzB,OAAO,IAAI,MAAM,aAAa,CAAC;AAC/B,OAAO,QAAQ,MAAM,qBAAqB,CAAC;AAC3C,OAAO,IAAI,MAAM,aAAa,CAAC;AAC/B,OAAO,UAAU,MAAM,yBAAyB,CAAC;AACjD,OAAO,IAAI,MAAM,aAAa,CAAC;AAC/B,OAAO,GAAG,MAAM,WAAW,CAAC;AAC5B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,KAAK,MAAM,eAAe,CAAC;AAClC,OAAO,OAAO,MAAM,mBAAmB,CAAC;AACxC,OAAO,OAAO,MAAM,mBAAmB,CAAC;AACxC,OAAO,SAAS,MAAM,uBAAuB,CAAC;AAC9C,OAAO,UAAU,MAAM,yBAAyB,CAAC;AACjD,OAAO,KAAK,MAAM,eAAe,CAAC;AAClC,OAAO,EACH,MAAM,EACN,MAAM,EACN,IAAI,EACJ,SAAS,EACT,MAAM,EACN,IAAI,EACJ,aAAa,EACb,QAAQ,EACR,EAAE,EACF,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,UAAU,EACV,IAAI,EACJ,GAAG,EACH,KAAK,EACL,MAAM,EACN,OAAO,EACP,OAAO,EACP,SAAS,EACT,UAAU,EACV,KAAK,GACR,CAAC"}

package/index.tsx

@@ -19,6 +19,7 @@ import SvgIcon from "./svgIcon/svgIcon";
 import Loading from "./loading/loading";
 import CodeField from "./codeField/codeField";
 import InputField from "./inputField/inputField";
+import Thame from "./thame/thame";
 export {
     Button,
     AppBar,
@@ -41,4 +42,5 @@ export {
     Loading,
     CodeField,
     InputField,
+    Thame,
 };

package/inputField/inputField.module.css

@@ -47,7 +47,7 @@
 }
 .input.standard:valid,
 .input.standard:focus {
-    border-color: var(--primaryColor, #121212);
+    border-color: var(--secondaryColor, #121212);
 }
 
 .input.outlined {
@@ -60,13 +60,13 @@
 }
 .input.outlined + .placeholder {
     border-color: var(--onBackgroundColor, #000000);
-    background: var(--surfaceColor, #222222);
+    background: var(--backgroundColor, #ffffff);
 }
 
 .input.outlined:valid,
 .input.outlined:focus + .placeholder {
     border-color: var(--onBackgroundColor, #000000);
-    background: var(--surfaceColor, #222222);
+    background: var(--backgroundColor, #ffffff);
 }
 
 .input.filled {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@yakad/ui",
-    "version": "1.2.22-beta",
+    "version": "1.2.24-beta",
     "description": "",
     "main": "./src/index.js",
     "scripts": {

package/thame/thame.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface ThameProps extends React.HTMLAttributes<HTMLElement> {
+    mode?: "light" | "dark" | "system";
+    color?: "green" | "pink" | "grow" | "blue";
+}
+declare function Thame(props: ThameProps): JSX.Element;
+export default Thame;

package/thame/thame.js

@@ -0,0 +1,8 @@
+import { joinClassNames } from "@yakad/lib";
+import styles from "./thame.module.css";
+function Thame(props) {
+    const joinedClassNames = joinClassNames(styles.blue, props.mode ? styles[props.mode] : styles.blue, props.color ? styles[props.color] : styles.blue, props.className);
+    return React.createElement("div", { className: joinedClassNames }, props.children);
+}
+export default Thame;
+//# sourceMappingURL=thame.js.map

package/thame/thame.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"thame.js","sourceRoot":"","sources":["thame.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAc,MAAM,YAAY,CAAC;AACxD,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAOxC,SAAS,KAAK,CAAC,KAAiB;IAC5B,MAAM,gBAAgB,GAAG,cAAc,CACnC,MAAM,CAAC,IAAI,EACX,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,EAC7C,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,EAC/C,KAAK,CAAC,SAAU,CACnB,CAAC;IACF,OAAO,6BAAK,SAAS,EAAE,gBAAgB,IAAG,KAAK,CAAC,QAAQ,CAAO,CAAC;AACpE,CAAC;AAED,eAAe,KAAK,CAAC"}

package/thame/thame.module.css

@@ -0,0 +1,244 @@
+.blue {
+    --LightPrimaryColor: #1e64d4;
+    --LightPrimaryContainerColor: #c2e7ff;
+    --LightSecondaryColor: #121212;
+    --LightSecondaryContainerColor: #d9e7cb;
+    --LightTertiaryColor: #386a20;
+    --LightTertiaryContainerColor: #b7f397;
+    --LightBackgroundColor: #ffffff;
+    --LightSurfaceColor: #222222;
+    --LightErrorColor: #b00020;
+    --LightErrorContainerColor: #f9dedc;
+    --LightOnPrimaryColor: #ffffff;
+    --LightOnPrimaryContainerColor: #002021;
+    --LightOnSecondaryColor: #ffffff;
+    --LightOnSecondaryContainerColor: #131f0d;
+    --LightOnTertiaryColor: #ffffff;
+    --LightOnTertiaryContainerColor: #042100;
+    --LightOnBackgroundColor: #000000;
+    --LightOnSurfaceColor: #ffffff;
+    --LightOnErrorColor: #ffffff;
+    --LightOnErrorContainerColor: #410e0b;
+
+    --DarkDarkrimaryColor: #c2e7ff;
+    --DarkPrimaryContainerColor: #1e64d4;
+    --DarkSecondaryColor: #d9e7cb;
+    --DarkSecondaryContainerColor: #3e4a36;
+    --DarkTertiaryColor: #b7f397;
+    --DarkTertiaryContainerColor: #386a20;
+    --DarkBackgroundColor: #1a1c18;
+    --DarkSurfaceColor: #1a1c18;
+    --DarkErrorColor: #b00020;
+    --DarkErrorContainerColor: #f9dedc;
+    --DarkOnPrimaryColor: #003738;
+    --DarkOnPrimaryContainerColor: #c2e7ff;
+    --DarkOnSecondaryColor: #121212;
+    --DarkOnSecondaryContainerColor: #d9e7cb;
+    --DarkOnTertiaryColor: #042100;
+    --DarkOnTertiaryContainerColor: #b7f397;
+    --DarkOnBackgroundColor: #ffffff;
+    --DarkOnSurfaceColor: #ffffff;
+    --DarkOnErrorColor: #ffffff;
+    --DarkOnErrorContainerColor: #410e0b;
+}
+.green {
+    --LightPrimaryColor: #386a20;
+    --LightPrimaryContainerColor: #cad7bd;
+    --LightSecondaryColor: #121212;
+    --LightSecondaryContainerColor: #d9e7cb;
+    --LightTertiaryColor: #19686a;
+    --LightTertiaryContainerColor: #a8eff0;
+    --LightBackgroundColor: #ffffff;
+    --LightSurfaceColor: #222222;
+    --LightErrorColor: #b00020;
+    --LightErrorContainerColor: #f9dedc;
+    --LightOnPrimaryColor: #ffffff;
+    --LightOnPrimaryContainerColor: #131f0d;
+    --LightOnSecondaryColor: #ffffff;
+    --LightOnSecondaryContainerColor: #131f0d;
+    --LightOnTertiaryColor: #ffffff;
+    --LightOnTertiaryContainerColor: #002021;
+    --LightOnBackgroundColor: #000000;
+    --LightOnSurfaceColor: #ffffff;
+    --LightOnErrorColor: #ffffff;
+    --LightOnErrorContainerColor: #410e0b;
+
+    --DarkDarkrimaryColor: #cad7bd;
+    --DarkPrimaryContainerColor: #205107;
+    --DarkSecondaryColor: #d9e7cb;
+    --DarkSecondaryContainerColor: #3e4a36;
+    --DarkTertiaryColor: #a8eff0;
+    --DarkTertiaryContainerColor: #1e64d4;
+    --DarkBackgroundColor: #1a1c18;
+    --DarkSurfaceColor: #1a1c18;
+    --DarkErrorColor: #b00020;
+    --DarkErrorContainerColor: #f9dedc;
+    --DarkOnPrimaryColor: #386a20;
+    --DarkOnPrimaryContainerColor: #cad7bd;
+    --DarkOnSecondaryColor: #121212;
+    --DarkOnSecondaryContainerColor: #d9e7cb;
+    --DarkOnTertiaryColor: #19686a;
+    --DarkOnTertiaryContainerColor: #a8eff0;
+    --DarkOnBackgroundColor: #ffffff;
+    --DarkOnSurfaceColor: #ffffff;
+    --DarkOnErrorColor: #ffffff;
+    --DarkOnErrorContainerColor: #410e0b;
+}
+
+.pink {
+    --LightPrimaryColor: #9c4146;
+    --LightPrimaryContainerColor: #ffdad9;
+    --LightSecondaryColor: #121212;
+    --LightSecondaryContainerColor: #d9e7cb;
+    --LightTertiaryColor: #604003;
+    --LightTertiaryContainerColor: #f1d1a2;
+    --LightBackgroundColor: #ffffff;
+    --LightSurfaceColor: #222222;
+    --LightErrorColor: #b00020;
+    --LightErrorContainerColor: #f9dedc;
+    --LightOnPrimaryColor: #ffffff;
+    --LightOnPrimaryContainerColor: #2d1516;
+    --LightOnSecondaryColor: #ffffff;
+    --LightOnSecondaryContainerColor: #131f0d;
+    --LightOnTertiaryColor: #ffffff;
+    --LightOnTertiaryContainerColor: #46381f;
+    --LightOnBackgroundColor: #000000;
+    --LightOnSurfaceColor: #ffffff;
+    --LightOnErrorColor: #ffffff;
+    --LightOnErrorContainerColor: #410e0b;
+
+    --DarkDarkrimaryColor: #ffdad9;
+    --DarkPrimaryContainerColor: #9c4146;
+    --DarkSecondaryColor: #d9e7cb;
+    --DarkSecondaryContainerColor: #3e4a36;
+    --DarkTertiaryColor: #f1d1a2;
+    --DarkTertiaryContainerColor: #281800;
+    --DarkBackgroundColor: #1a1c18;
+    --DarkSurfaceColor: #1a1c18;
+    --DarkErrorColor: #b00020;
+    --DarkErrorContainerColor: #f9dedc;
+    --DarkOnPrimaryColor: #9c4146;
+    --DarkOnPrimaryContainerColor: #ffdad9;
+    --DarkOnSecondaryColor: #121212;
+    --DarkOnSecondaryContainerColor: #d9e7cb;
+    --DarkOnTertiaryColor: #604003;
+    --DarkOnTertiaryContainerColor: #f1d1a2;
+    --DarkOnBackgroundColor: #ffffff;
+    --DarkOnSurfaceColor: #ffffff;
+    --DarkOnErrorColor: #ffffff;
+    --DarkOnErrorContainerColor: #410e0b;
+}
+
+.grow {
+    --LightPrimaryColor: #616200;
+    --LightPrimaryContainerColor: #e6e4bf;
+    --LightSecondaryColor: #121212;
+    --LightSecondaryContainerColor: #d9e7cb;
+    --LightTertiaryColor: #bfedd9;
+    --LightTertiaryContainerColor: #f1d1a2;
+    --LightBackgroundColor: #ffffff;
+    --LightSurfaceColor: #222222;
+    --LightErrorColor: #b00020;
+    --LightErrorContainerColor: #f9dedc;
+    --LightOnPrimaryColor: #ffffff;
+    --LightOnPrimaryContainerColor: #1c1d06;
+    --LightOnSecondaryColor: #ffffff;
+    --LightOnSecondaryContainerColor: #131f0d;
+    --LightOnTertiaryColor: #ffffff;
+    --LightOnTertiaryContainerColor: #0c3637;
+    --LightOnBackgroundColor: #000000;
+    --LightOnSurfaceColor: #ffffff;
+    --LightOnErrorColor: #ffffff;
+    --LightOnErrorContainerColor: #410e0b;
+
+    --DarkDarkrimaryColor: #e6e4bf;
+    --DarkPrimaryContainerColor: #616200;
+    --DarkSecondaryColor: #d9e7cb;
+    --DarkSecondaryContainerColor: #3e4a36;
+    --DarkTertiaryColor: #b7f397;
+    --DarkTertiaryContainerColor: #386a20;
+    --DarkBackgroundColor: #1a1c18;
+    --DarkSurfaceColor: #1a1c18;
+    --DarkErrorColor: #b00020;
+    --DarkErrorContainerColor: #f9dedc;
+    --DarkOnPrimaryColor: #616200;
+    --DarkOnPrimaryContainerColor: #e6e4bf;
+    --DarkOnSecondaryColor: #121212;
+    --DarkOnSecondaryContainerColor: #d9e7cb;
+    --DarkOnTertiaryColor: #042100;
+    --DarkOnTertiaryContainerColor: #b7f397;
+    --DarkOnBackgroundColor: #ffffff;
+    --DarkOnSurfaceColor: #ffffff;
+    --DarkOnErrorColor: #ffffff;
+    --DarkOnErrorContainerColor: #410e0b;
+}
+
+.system,
+.light {
+    --primaryColor: var(--LightPrimaryColor);
+    --primaryContainerColor: var(--LightPrimaryContainerColor);
+    --secondaryColor: var(--LightSecondaryColor);
+    --secondaryContainerColor: var(--LightSecondaryContainerColor);
+    --tertiaryColor: var(--LightTertiaryColor);
+    --tertiaryContainerColor: var(--LightTertiaryContainerColor);
+    --backgroundColor: var(--LightBackgroundColor);
+    --surfaceColor: var(--LightSurfaceColor);
+    --errorColor: var(--LightErrorColor);
+    --errorContainerColor: var(--LightErrorContainerColor);
+    --onPrimaryColor: var(--LightOnPrimaryColor);
+    --onPrimaryContainerColor: var(--LightOnPrimaryContainerColor);
+    --onSecondaryColor: var(--LightOnSecondaryColor);
+    --onSecondaryContainerColor: var(--LightOnSecondaryContainerColor);
+    --onTertiaryColor: var(--LightOnTertiaryColor);
+    --onTertiaryContainerColor: var(--DarkonTertiaryContainerColor);
+    --onBackgroundColor: var(--LightOnBackgroundColor);
+    --onSurfaceColor: var(--LightOnSurfaceColor);
+    --onErrorColor: var(--LightOnErrorColor);
+    --onErrorContainerColor: var(--LightOnErrorContainerColor);
+}
+.dark {
+    --primaryColor: var(--DarkPrimaryColor);
+    --primaryContainerColor: var(--DarkPrimaryContainerColor);
+    --secondaryColor: var(--DarkSecondaryColor);
+    --secondaryContainerColor: var(--DarkSecondaryContainerColor);
+    --tertiaryColor: var(--DarkTertiaryColor);
+    --tertiaryContainerColor: var(--DarkTertiaryContainerColor);
+    --backgroundColor: var(--DarkBackgroundColor);
+    --surfaceColor: var(--DarkSurfaceColor);
+    --errorColor: var(--DarkErrorColor);
+    --errorContainerColor: var(--DarkErrorContainerColor);
+    --onPrimaryColor: var(--DarkOnPrimaryColor);
+    --onPrimaryContainerColor: var(--DarkOnPrimaryContainerColor);
+    --onSecondaryColor: var(--DarkOnSecondaryColor);
+    --onSecondaryContainerColor: var(--DarkOnSecondaryContainerColor);
+    --onTertiaryColor: var(--DarkOnTertiaryColor);
+    --onTertiaryContainerColor: var(--DarkonTertiaryContainerColor);
+    --onBackgroundColor: var(--DarkOnBackgroundColor);
+    --onSurfaceColor: var(--DarkOnSurfaceColor);
+    --onErrorColor: var(--DarkOnErrorColor);
+    --onErrorContainerColor: var(--DarkOnErrorContainerColor);
+}
+@media (prefers-color-scheme: dark) {
+    .system {
+        --primaryColor: var(--DarkPrimaryColor);
+        --primaryContainerColor: var(--DarkPrimaryContainerColor);
+        --secondaryColor: var(--DarkSecondaryColor);
+        --secondaryContainerColor: var(--DarkSecondaryContainerColor);
+        --tertiaryColor: var(--DarkTertiaryColor);
+        --tertiaryContainerColor: var(--DarkTertiaryContainerColor);
+        --backgroundColor: var(--DarkBackgroundColor);
+        --surfaceColor: var(--DarkSurfaceColor);
+        --errorColor: var(--DarkErrorColor);
+        --errorContainerColor: var(--DarkErrorContainerColor);
+        --onPrimaryColor: var(--DarkOnPrimaryColor);
+        --onPrimaryContainerColor: var(--DarkOnPrimaryContainerColor);
+        --onSecondaryColor: var(--DarkOnSecondaryColor);
+        --onSecondaryContainerColor: var(--DarkOnSecondaryContainerColor);
+        --onTertiaryColor: var(--DarkOnTertiaryColor);
+        --onTertiaryContainerColor: var(--DarkonTertiaryContainerColor);
+        --onBackgroundColor: var(--DarkOnBackgroundColor);
+        --onSurfaceColor: var(--DarkOnSurfaceColor);
+        --onErrorColor: var(--DarkOnErrorColor);
+        --onErrorContainerColor: var(--DarkOnErrorContainerColor);
+    }
+}

package/thame/thame.tsx

@@ -0,0 +1,20 @@
+import Reat from "react";
+import { joinClassNames, joinStyles } from "@yakad/lib";
+import styles from "./thame.module.css";
+
+interface ThameProps extends React.HTMLAttributes<HTMLElement> {
+    mode?: "light" | "dark" | "system";
+    color?: "green" | "pink" | "grow" | "blue";
+}
+
+function Thame(props: ThameProps) {
+    const joinedClassNames = joinClassNames(
+        styles.blue,
+        props.mode ? styles[props.mode] : styles.blue,
+        props.color ? styles[props.color] : styles.blue,
+        props.className!
+    );
+    return <div className={joinedClassNames}>{props.children}</div>;
+}
+
+export default Thame;