docs(fluffy): fix colors

shairez · shairez · commit e36607359c64 · 2023-10-04T03:13:03.000+03:00
diff --git a/apps/website/src/colors.debug.css b/apps/website/src/colors.debug.css
@@ -6,17 +6,17 @@
     --color-primary: hsl(263, 56%, 52%);
     --color-primary-foreground: hsl(0, 0%, 100%);
 
-    --color-secondary: hsl(197, 78%, 48%);
+    --color-secondary: hsl(202, 91%, 52%);
     --color-secondary-foreground: hsl(0, 0%, 100%);
 
     --color-muted: hsl(210, 40%, 96%);
     --color-muted-foreground: hsl(263, 16%, 47%);
 
-    --color-accent: hsl(210, 40%, 96%);
+    --color-accent: hsl(0, 0%, 83%);
     --color-accent-foreground: hsl(263, 47%, 11%);
 
     --color-destructive: hsl(0, 84%, 60%);
-    --color-destructive-foreground: hsl(263, 40%, 98%);
+    --color-destructive-foreground: hsl(0, 0%, 100%);
 
     --color-card: hsl(0, 0%, 100%);
     --color-card-foreground: hsl(263, 84%, 5%);
@@ -28,7 +28,7 @@
 
     --color-input: hsl(263, 32%, 91%);
 
-    --color-ring: hsl(263, 84%, 25%);
+    --color-ring: hsl(263, 18%, 61%);
 
     --border-radius: 0.375rem;
   }
@@ -37,19 +37,19 @@
     --color-background: hsl(263, 84%, 5%);
     --color-foreground: hsl(263, 40%, 98%);
 
-    --color-primary: hsl(263, 56%, 52%);
+    --color-primary: hsl(263, 70%, 58%);
     --color-primary-foreground: hsl(190 40% 98%);
 
-    --color-secondary: hsl(197 32.6% 17.5%);
+    --color-secondary: hsl(202, 97%, 55%);
     --color-secondary-foreground: hsl(190 40% 98%);
 
     --color-muted: hsl(218 32.6% 17.5%);
     --color-muted-foreground: hsl(263 20.2% 65.1%);
 
-    --color-accent: hsl(263 32.6% 17.5%);
-    --color-accent-foreground: hsl(263 40% 98%);
+    --color-accent: hsl(0, 0%, 26%);
+    --color-accent-foreground: hsl(263 32.6% 17.5%);
 
-    --color-destructive: hsl(0 62.8% 30.6%);
+    --color-destructive: hsl(0, 70%, 41%);
     --color-destructive-foreground: hsl(263 40% 98%);
 
     --color-card: hsl(263 84% 4.9%);
diff --git a/apps/website/src/global.css b/apps/website/src/global.css
@@ -10,17 +10,17 @@
     --color-primary: 263 56% 52%;
     --color-primary-foreground: 0 0% 100%;
 
-    --color-secondary: 197 78% 42%;
+    --color-secondary: 202 91% 52%;
     --color-secondary-foreground: 0 0% 100%;
 
     --color-muted: 210 40% 96%;
     --color-muted-foreground: 263 16% 47%;
 
-    --color-accent: 210 40% 96%;
+    --color-accent: 0 0% 89%;
     --color-accent-foreground: 263 47% 11%;
 
     --color-destructive: 0 84% 60%;
-    --color-destructive-foreground: 263 40% 98%;
+    --color-destructive-foreground: 263 0% 100%;
 
     --color-card: 0 0% 100%;
     --color-card-foreground: 263 84% 5%;
@@ -32,18 +32,18 @@
 
     --color-input: 263 32% 91%;
 
-    --color-ring: 263 84% 25%;
+    --color-ring: 263 18% 61%;
 
     --border-radius: 0.375rem;
 
     --shiki-color-text: theme('colors.black');
-    --shiki-token-constant: theme('colors.emerald.700');
+    --shiki-token-constant: theme('colors.emerald.800');
     --shiki-token-string: theme('colors.emerald.700');
     --shiki-token-comment: theme('colors.zinc.700');
     --shiki-token-keyword: theme('colors.sky.600');
     --shiki-token-parameter: theme('colors.pink.700');
-    --shiki-token-function: theme('colors.violet.800');
-    --shiki-token-string-expression: theme('colors.emerald.600');
+    --shiki-token-function: theme('colors.purple.700');
+    --shiki-token-string-expression: theme('colors.emerald.700');
     --shiki-token-punctuation: theme('colors.zinc.700');
   }
 
@@ -52,19 +52,19 @@
     --color-background: 222 47% 11%;
     --color-foreground: 263 40% 98%;
 
-    --color-primary: 263 56% 52%;
+    --color-primary: 263 70% 58%;
     --color-primary-foreground: 190 40% 98%;
 
-    --color-secondary: 197 32.6% 17.5%;
+    --color-secondary: 202 97% 55%;
     --color-secondary-foreground: 190 40% 98%;
 
     --color-muted: 218 32.6% 17.5%;
     --color-muted-foreground: 263 20.2% 65.1%;
 
-    --color-accent: 263 32.6% 17.5%;
+    --color-accent: 0 0% 23%;
     --color-accent-foreground: 263 40% 98%;
 
-    --color-destructive: 0 62.8% 30.6%;
+    --color-destructive: 0 70% 40%;
     --color-destructive-foreground: 263 40% 98%;
 
     --color-card: 263 84% 4.9%;
diff --git a/apps/website/src/routes/docs/_components/code-copy/code-copy.tsx b/apps/website/src/routes/docs/_components/code-copy/code-copy.tsx
@@ -1,5 +1,6 @@
 import { QwikIntrinsicElements, component$, useSignal } from '@builder.io/qwik';
 import { stringifyClassList } from '@qwik-ui/cva';
+import { Button } from '@qwik-ui/fluffy';
 import { OmitSignalClass } from '@qwik-ui/type-utils';
 import copy from 'clipboard-copy';
 import { twMerge } from 'tailwind-merge';
@@ -14,24 +15,21 @@ export const CodeCopy = component$(
 
     return (
       <div>
-        {!copied.value ? (
-          <button
-            {...restOfProps}
-            title={copied ? 'Copied to Clipboard' : 'Copy to Clipboard'}
-            class={twMerge(
-              `mt-2 rounded p-3 hover:bg-slate-500/25`,
-              stringifyClassList(outsideClass),
-            )}
-            onClick$={async () => {
-              await copy(code);
-              copied.value = true;
-            }}
-          >
-            Copy
-          </button>
-        ) : (
-          <span class={twMerge(`m-3`, stringifyClassList(outsideClass))}>Copied!</span>
-        )}
+        <Button
+          look="ghost"
+          intent="basic"
+          animation={!copied.value ? 'bouncy' : 'none'}
+          {...restOfProps}
+          title={copied.value ? 'Copied to Clipboard' : 'Copy to Clipboard'}
+          class={twMerge(stringifyClassList(outsideClass))}
+          onClick$={async () => {
+            await copy(code);
+            copied.value = true;
+          }}
+        >
+          {!copied.value ? 'Copy' : 'Copied!'}
+        </Button>
+        )
       </div>
     );
   },
diff --git a/apps/website/src/routes/docs/_components/code-example/code-example-container.tsx b/apps/website/src/routes/docs/_components/code-example/code-example-container.tsx
@@ -4,7 +4,7 @@ import { Highlight } from '../highlight/highlight';
 export const CodeExampleContainer = component$((props: { code: string }) => {
   return (
     <div
-      class={`shadow-3xl shadow-light-low dark:shadow-dark-low mb-6 rounded-xl border-2 border-slate-500 dark:border-slate-400`}
+      class={`shadow-3xl shadow-light-medium dark:shadow-dark-medium mb-6 rounded-xl border-2 border-slate-200 dark:border-slate-400`}
     >
       <Highlight code={props.code} />
     </div>
diff --git a/apps/website/src/routes/docs/_components/component-status-badge/component-status-badge.tsx b/apps/website/src/routes/docs/_components/component-status-badge/component-status-badge.tsx
@@ -16,7 +16,7 @@ export function getClassByStatus(status: ComponentStatus) {
     case ComponentStatus.Draft:
       return 'text-slate-200 bg-slate-700 dark:bg-slate-800 border-[1px] border-slate-400 shadow-dark-low tracking-wide dark:shadow-dark-low text-outline-draft';
     case ComponentStatus.Planned:
-      return 'text-white bg-slate-300 border-[1px] border-slate-500 dark:border-slate-400 tracking-wide shadow-dark-low dark:shadow-dark-low text-outline-planned';
+      return 'text-white bg-slate-400 dark:bg-slate-600 border-[1px] border-slate-500 dark:border-slate-400 tracking-wide shadow-dark-low dark:shadow-dark-low text-outline-planned dark:text-outline-none';
     default:
       return null;
   }
diff --git a/apps/website/src/routes/docs/_components/highlight/highlight.tsx b/apps/website/src/routes/docs/_components/highlight/highlight.tsx
@@ -39,12 +39,12 @@ export const Highlight = component$(
       <div
         {...props}
         class={[
-          'tab-size bg-background relative h-full max-w-full overflow-hidden overflow-x-auto rounded-xl p-12 text-sm dark:bg-slate-900',
+          'tab-size relative h-full max-w-full overflow-hidden overflow-x-auto rounded-xl bg-slate-50 p-12 text-sm dark:bg-slate-800',
           props.class,
         ]}
       >
         <div dangerouslySetInnerHTML={codeSig.value} />
-        <CodeCopy class="absolute right-2 top-0" code={code} />
+        <CodeCopy class="absolute right-2 top-2" code={code} />
       </div>
     );
   },
diff --git a/apps/website/src/routes/docs/_components/navigation-docs/navigation-docs.tsx b/apps/website/src/routes/docs/_components/navigation-docs/navigation-docs.tsx
@@ -60,7 +60,7 @@ export const DocsNavigation = component$(({ linksGroups }: DocsNavigationProps)
         return (
           <>
             <div class="px-6 pt-6">
-              <h2 class="bg-qwikui-blue-400 dark:bg-qwikui-purple-500 shadow-dark-low dark:shadow-dark-high border-qwikui-blue-100 dark:border-qwikui-purple-100 text-outline-lg mb-4 rounded-lg border-2 px-4 py-1 text-3xl font-bold tracking-widest text-white lg:text-lg">
+              <h2 class="bg-qwikui-blue-600 dark:bg-qwikui-purple-800 shadow-dark-low dark:shadow-dark-high border-qwikui-blue-100 dark:border-qwikui-purple-100 text-outline-lg mb-4 rounded-lg border-2 px-4 py-1 text-3xl font-bold  text-white lg:text-lg">
                 {group.name}
               </h2>
               <ul class="flex flex-col gap-2">
diff --git a/apps/website/src/routes/docs/_components/preview-code-example/preview-code-example-vertical.tsx b/apps/website/src/routes/docs/_components/preview-code-example/preview-code-example-vertical.tsx
@@ -1,18 +1,18 @@
 import { Slot, component$ } from '@builder.io/qwik';
-import { PreviewCodeExampleProps } from './preview-code-example-props.type';
 import { Highlight } from '../highlight/highlight';
+import { PreviewCodeExampleProps } from './preview-code-example-props.type';
 
 export const PreviewCodeExampleVertical = component$((props: PreviewCodeExampleProps) => {
   return (
-    <div class="dark:border-qwikui-purple-200 shadow-light-medium dark:shadow-dark-medium flex w-full flex-col rounded-b-xl rounded-t-xl border-[1.5px] border-solid">
+    <div class="dark:border-qwikui-purple-200 shadow-light-medium dark:shadow-dark-medium flex w-full flex-col rounded-b-xl rounded-t-xl border-[1.5px] border-solid border-slate-200">
       <h3 class=" flex rounded-t-xl text-white"></h3>
-      <section class="p-4">
+      <section class="rounded-t-xl bg-slate-50 p-4 dark:bg-slate-800">
         <Slot name="actualComponent" />
       </section>
-      <h3 class="dark:border-qwikui-purple-200 bg-qwikui-blue-500 dark:bg-qwikui-purple-600 text-outline-lg selected border-y-[1.5px] px-4 py-2 text-white">
+      <h3 class="dark:border-qwikui-purple-200 bg-qwikui-blue-600 dark:bg-qwikui-purple-800 text-outline-lg selected border-y-[1.5px] px-4 py-2 font-bold text-white">
         Code
       </h3>
-      <aside class="border-qwikui-blue-300 dark:border-qwikui-purple-200 rounded-b-xl border-[1.5px] border-solid">
+      <aside class="rounded-b-xl border-[1.5px] border-solid">
         <Highlight code={props.code} class="rounded" />
       </aside>
     </div>
diff --git a/apps/website/src/routes/docs/fluffy/(components)/button/examples.tsx b/apps/website/src/routes/docs/fluffy/(components)/button/examples.tsx
@@ -1,12 +1,15 @@
 import { JSXNode, component$ } from '@builder.io/qwik';
 // eslint-disable-next-line @nx/enforce-module-boundaries
 import fluffyButtonCode from '../../../../../../../../packages/kit-fluffy/src/components/button/button?raw';
+import { CodeExampleContainer } from '../../../_components/code-example/code-example-container';
 import { Highlight } from '../../../_components/highlight/highlight';
 import { PreviewCodeExampleVertical } from '../../../_components/preview-code-example/preview-code-example-vertical';
 import { ShowExampleProps } from '../../../headless/(components)/combobox/examples';
 import AnimationExampleComponent from './examples/animation';
-import IconExampleComponent from './examples/icon';
 import animationExamplesCode from './examples/animation?raw';
+import CombinationExampleComponent from './examples/combination';
+import combinationExamplesCode from './examples/combination?raw';
+import IconExampleComponent from './examples/icon';
 import iconExamplesCode from './examples/icon?raw';
 import IntentExampleComponent from './examples/intent';
 import intentExamplesCode from './examples/intent?raw';
@@ -18,7 +21,6 @@ import SizeExampleComponent from './examples/size';
 import sizeExamplesCode from './examples/size?raw';
 import StateExampleComponent from './examples/state';
 import stateExamplesCode from './examples/state?raw';
-import { CodeExampleContainer } from '../../../_components/code-example/code-example-container';
 export type Example = {
   component: JSXNode;
   code: string;
@@ -54,6 +56,10 @@ export const examples: Record<string, Example> = {
     component: <IconExampleComponent />,
     code: iconExamplesCode,
   },
+  combination: {
+    component: <CombinationExampleComponent />,
+    code: combinationExamplesCode,
+  },
 };
 
 export const InstallExample = component$(() => (
diff --git a/apps/website/src/routes/docs/fluffy/(components)/button/examples/combination.tsx b/apps/website/src/routes/docs/fluffy/(components)/button/examples/combination.tsx
@@ -0,0 +1,27 @@
+import { component$ } from '@builder.io/qwik';
+import { Button } from '@qwik-ui/fluffy';
+
+export default component$(() => {
+  return (
+    <section class="flex items-center justify-center gap-3">
+      <Button look="ghost" intent="secondary">
+        Ghost
+      </Button>
+      <Button look="outline" intent="secondary">
+        Outline
+      </Button>
+      <Button look="ghost" intent="danger">
+        Ghost
+      </Button>
+      <Button look="outline" intent="danger">
+        Outline
+      </Button>
+      <Button look="ghost" intent="basic">
+        Ghost
+      </Button>
+      <Button look="outline" intent="basic">
+        Outline
+      </Button>
+    </section>
+  );
+});
diff --git a/apps/website/src/routes/docs/fluffy/(components)/button/index.mdx b/apps/website/src/routes/docs/fluffy/(components)/button/index.mdx
@@ -6,7 +6,7 @@ import { APITable } from '../../../_components/api-table/api-table';
 
 # Fluffy Button
 
-A button is a widget that allows users to initiate actions, like submitting forms, opening dialogs, canceling operations, or performing deletions.
+The fluffy button is meant to be fun, playful, but serious when it comes to business.
 
 ## Installation
 
@@ -44,4 +44,8 @@ Just copy and paste the following code to your repository.
 
 <ShowExample example="icon"/>
 
+### Combination
+
+<ShowExample example="combination"/>
+
 
diff --git a/packages/kit-fluffy/src/components/button/button.tsx b/packages/kit-fluffy/src/components/button/button.tsx
@@ -10,8 +10,8 @@ export const buttonVariants = cva(
   {
     variants: {
       intent: {
-        basic:
-          'text-foreground font-semibold py-2 px-4 border border-gray-300 rounded hover:bg-accent hover:text-accent-foreground',
+        basic: `text-foreground font-semibold py-2 px-4 border border-gray-300 
+           rounded hover:bg-accent hover:text-accent-foreground`,
         primary: 'bg-primary text-primary-foreground hover:bg-primary/80',
         secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
         danger: 'bg-destructive text-destructive-foreground hover:bg-destructive/80',
@@ -21,8 +21,7 @@ export const buttonVariants = cva(
                hover:underline hover:bg-transparent shadow-none outline-current`,
         ghost:
           'border-transparent bg-transparent border hover:bg-accent hover:text-accent-foreground',
-        outline:
-          'bg-transparent border border-input hover:bg-accent  hover:text-accent-foreground',
+        outline: 'bg-transparent border  hover:bg-accent  hover:text-accent-foreground',
       },
       shape: {
         rounded: 'rounded',
@@ -83,6 +82,11 @@ export const buttonVariants = cva(
         look: ['outline'],
         class: 'border-destructive',
       },
+      {
+        intent: 'basic',
+        look: ['outline'],
+        class: 'border-foreground',
+      },
     ],
   },
 );

Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,7 @@ import { Highlight } from '../highlight/highlight';`
`4`	`4`	`export const CodeExampleContainer = component$((props: { code: string }) => {`
`5`	`5`	`return (`
`6`	`6`	`<div`
`7`		- class={`shadow-3xl shadow-light-low dark:shadow-dark-low mb-6 rounded-xl border-2 border-slate-500 dark:border-slate-400`}
	`7`	+ class={`shadow-3xl shadow-light-medium dark:shadow-dark-medium mb-6 rounded-xl border-2 border-slate-200 dark:border-slate-400`}
`8`	`8`	`>`
`9`	`9`	`<Highlight code={props.code} />`
`10`	`10`	`</div>`
Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,7 @@ export function getClassByStatus(status: ComponentStatus) {`
`16`	`16`	`case ComponentStatus.Draft:`
`17`	`17`	`return 'text-slate-200 bg-slate-700 dark:bg-slate-800 border-[1px] border-slate-400 shadow-dark-low tracking-wide dark:shadow-dark-low text-outline-draft';`
`18`	`18`	`case ComponentStatus.Planned:`
`19`		`- return 'text-white bg-slate-300 border-[1px] border-slate-500 dark:border-slate-400 tracking-wide shadow-dark-low dark:shadow-dark-low text-outline-planned';`
	`19`	`+ return 'text-white bg-slate-400 dark:bg-slate-600 border-[1px] border-slate-500 dark:border-slate-400 tracking-wide shadow-dark-low dark:shadow-dark-low text-outline-planned dark:text-outline-none';`
`20`	`20`	`default:`
`21`	`21`	`return null;`
`22`	`22`	`}`