add missing aliases

massalabs · May 22, 2023 · 3dc5d7d · 3dc5d7d
1 parent 19b117d
commit 3dc5d7d
Show file tree

Hide file tree

Showing 2 changed files with 130 additions and 22 deletions.
diff --git a/src/components/Colors/Color.tsx b/src/components/Colors/Color.tsx
@@ -8,40 +8,149 @@ export interface ColorRectangleProps extends ComponentPropsWithoutRef<"div"> {
  theme: string;
 }
 
-export function Theme(props: ColorRectangleProps) {
+function Color(props: { color: string }) {
  return (
- <div className={`mb-2 ${props.theme}`}>
- <p className="w-40 h-10 text-center">{props.theme}</p>
+ <div
+ id={props.color}
+ className={`w-40 h-10 mb-2 ${props.color} border-2 border-black-600`}
+ />
+ );
+}
+
+export function Alias() {
+ const Colors = () => (
+ <div>
+ <p className="w-40 h-10 mb-2 text-center ">primary</p>
+ <p className="w-40 h-10 mb-2 text-center ">secondary</p>
+ <p className="w-40 h-10 mb-2 text-center ">tertiary</p>
+ <p className="w-40 h-10 mb-2 text-center ">brand</p>
+ <p className="w-40 h-10 mb-2 text-center ">neutral</p>
+ <p className="w-40 h-10 mb-2 text-center ">info</p>
+ </div>
+ );
+
+ const States = () => (
+ <div>
+ <p className="w-40 h-10 mb-2 text-center ">s-success</p>
+ <p className="w-40 h-10 mb-2 text-center ">s-warning</p>
+ <p className="w-40 h-10 mb-2 text-center ">s-error</p>
+ <p className="w-40 h-10 mb-2 text-center ">s-info</p>
+ </div>
+ );
+ const Components = () => (
+ <div>
+ <p className="w-40 h-10 mb-2 text-center ">c-default</p>
+ <p className="w-40 h-10 mb-2 text-center ">c-hover</p>
+ <p className="w-40 h-10 mb-2 text-center ">c-pressed</p>
+ <p className="w-40 h-10 mb-2 text-center ">c-disabled-1</p>
+ <p className="w-40 h-10 mb-2 text-center ">c-disabled-2</p>
+ </div>
+ );
+ const Icons = () => (
+ <div>
+ <p className="w-40 h-10 mb-2 text-center ">i-primary</p>
+ <p className="w-40 h-10 mb-2 text-center ">i-secondary</p>
+ <p className="w-40 h-10 mb-2 text-center ">i-tertiary</p>
+ </div>
+ );
+ const Fonts = () => (
+ <div>
+ <p className="w-40 h-10 mb-2 text-center ">f-primary</p>
+ <p className="w-40 h-10 mb-2 text-center ">f-secondary</p>
+ <p className="w-40 h-10 mb-2 text-center ">f-tertiary</p>
+ <p className="w-40 h-10 mb-2 text-center ">f-disabled-1</p>
+ <p className="w-40 h-10 mb-2 text-center ">f-disabled-2</p>
+ </div>
+ );
+
+ return (
+ <div className="mb-2">
+ <p className="w-40 h-10 mb-2 "></p>
+ <p className="w-40 h-10 mb-2 ">Colors : </p>
+ <Colors />
+
+ <p className="w-40 h-10 mb-2 ">States :</p>
+ <States />
+
+ <p className="w-40 h-10 mb-2 ">Components :</p>
+ <Components />
+ <p className="w-40 h-10 mb-2">Icons :</p>
+ <Icons />
+
+ <p className="w-40 h-10 mb-2 ">Fonts</p>
+ <Fonts />
+ </div>
+ );
+}
+export function Theme() {
+ const Colors = () => (
+ <div>
  <Color color="bg-primary" />
  <Color color="bg-secondary" />
  <Color color="bg-tertiary" />
  <Color color="bg-brand" />
  <Color color="bg-neutral" />
  <Color color="bg-info" />
+ </div>
+ );
+
+ const States = () => (
+ <div>
  <Color color="bg-s-success" />
  <Color color="bg-s-warning" />
  <Color color="bg-s-error" />
+ <Color color="bg-s-info" />
+ </div>
+ );
+ const Components = () => (
+ <div>
+ <Color color="bg-c-default" />
+ <Color color="bg-c-hover" />
+ <Color color="bg-c-pressed" />
+ <Color color="bg-c-disabled-1" />
+ <Color color="bg-c-disabled-2" />
+ </div>
+ );
+ const Icons = () => (
+ <div>
+ <Color color="bg-i-primary" />
+ <Color color="bg-i-secondary" />
+ <Color color="bg-i-tertiary" />
+ </div>
+ );
+ const Fonts = () => (
+ <div>
+ <Color color="bg-f-primary" />
+ <Color color="bg-f-secondary" />
+ <Color color="bg-f-tertiary" />
+ <Color color="bg-f-disabled-1" />
+ <Color color="bg-f-disabled-2" />
  </div>
  );
-}
-
-function Color(props: { color: string }) {
- return <div id={props.color} className={`w-40 h-10 mb-2 ${props.color}`} />;
-}
 
-export function Alias() {
  return (
- <div className="mb-2">
- <p className="w-40 h-10 mb-2 text-center "></p>
- <p className="w-40 h-10 mb-2 text-center ">primary</p>
- <p className="w-40 h-10 mb-2 text-center ">secondary</p>
- <p className="w-40 h-10 mb-2 text-center ">tertiary</p>
- <p className="w-40 h-10 mb-2 text-center ">brand</p>
- <p className="w-40 h-10 mb-2 text-center ">neutral</p>
- <p className="w-40 h-10 mb-2 text-center ">info</p>
- <p className="w-40 h-10 mb-2 text-center ">success</p>
- <p className="w-40 h-10 mb-2 text-center ">warning</p>
- <p className="w-40 h-10 mb-2 text-center ">error</p>
+ <div className={`mb-2 `}>
+ <div className={`w-40 h-10 mb-2 `} />
+
+ <p className="w-40 h-10 text-center"></p>
+
+ <Colors />
+
+ <div className={`w-40 h-10 mb-2 `} />
+
+ <States />
+
+ <div className={`w-40 h-10 mb-2 `} />
+
+ <Components />
+
+ <div className={`w-40 h-10 mb-2`} />
+
+ <Icons />
+
+ <div className={`w-40 h-10 mb-2 `} />
+
+ <Fonts />
  </div>
  );
 }
diff --git a/src/components/Colors/Colors.tsx b/src/components/Colors/Colors.tsx
@@ -4,8 +4,7 @@ export function Colors() {
  return (
  <div className="flex gap-4">
  <Alias />
- <Theme theme="theme-light" />
- <Theme theme="theme-dark" />
+ <Theme />
  </div>
  );
 }