replace prism copy button with custom copy button

generator/konfig-next-app/src/components/CodeIcon.tsx

@@ -0,0 +1,8 @@
+import { linkColor } from '@/utils/link-color'
+import { useMantineTheme } from '@mantine/core'
+import { IconCode } from '@tabler/icons-react'
+
+export function CodeIcon() {
+  const theme = useMantineTheme()
+  return <IconCode stroke={1.5} size="1.3rem" color={linkColor({ theme })} />
+}

generator/konfig-next-app/src/components/CopyButton.tsx

@@ -0,0 +1,77 @@
+import { CopyButton as MantineCopyButton, clsx } from '@mantine/core'
+import { notifications } from '@mantine/notifications'
+import { CodeIcon } from './CodeIcon'
+export function CopyButton({ value }: { value: string }) {
+  return (
+    <MantineCopyButton value={value}>
+      {({ copied, copy }) => (
+        <button
+          onClick={() => {
+            copy()
+            notifications.show({
+              id: 'code-copied-to-your-clipboard',
+              radius: 'md',
+              withBorder: true,
+              styles: {
+                body: {
+                  fontWeight: 500,
+                },
+                icon: {
+                  backgroundColor: 'transparent',
+                },
+              },
+              message: 'Code copied to your clipboard',
+              icon: <CodeIcon />,
+            })
+          }}
+          type="button"
+          className={clsx(
+            'group/button absolute right-4 top-3.5 overflow-hidden rounded-full py-1 pl-2 pr-3 text-xs font-medium opacity-0 backdrop-blur transition focus:opacity-100 group-hover:opacity-100 outline-brand-500 dark:outline-brand-700',
+            {
+              ['bg-white/5 hover:bg-white/7.5 dark:bg-white/2.5 shadow dark:shadow-none dark:hover:bg-white/5']:
+                !copied,
+              ['dark:bg-brand-400/10 bg-brand-600/20 ring-1 ring-inset dark:ring-brand-400/20 ring-brand-600/40']:
+                copied,
+            }
+          )}
+        >
+          <span
+            aria-hidden={!copied ? 'false' : 'true'}
+            className={clsx(
+              'pointer-events-none flex items-center gap-0.5 dark:text-zinc-400 text-zinc-500 transition duration-300',
+              { ['-translate-y-1.5 opacity-0']: copied }
+            )}
+          >
+            <svg
+              viewBox="0 0 20 20"
+              aria-hidden="true"
+              className="h-5 w-5 fill-zinc-500/20 stroke-zinc-500 transition-colors group-hover/button:stroke-zinc-700 dark:group-hover/button:stroke-zinc-400"
+            >
+              <path
+                strokeWidth="0"
+                d="M5.5 13.5v-5a2 2 0 0 1 2-2l.447-.894A2 2 0 0 1 9.737 4.5h.527a2 2 0 0 1 1.789 1.106l.447.894a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-5a2 2 0 0 1-2-2Z"
+              ></path>
+              <path
+                fill="none"
+                strokeLinejoin="round"
+                d="M12.5 6.5a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-5a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2m5 0-.447-.894a2 2 0 0 0-1.79-1.106h-.527a2 2 0 0 0-1.789 1.106L7.5 6.5m5 0-1 1h-3l-1-1"
+              ></path>
+            </svg>
+            Copy
+          </span>
+          <span
+            aria-hidden={!copied ? 'true' : 'false'}
+            className={clsx(
+              'pointer-events-none absolute inset-0 flex items-center justify-center text-brand-800 dark:text-brand-400 transition duration-300',
+              {
+                ['translate-y-1.5 opacity-0']: !copied,
+              }
+            )}
+          >
+            Copied!
+          </span>
+        </button>
+      )}
+    </MantineCopyButton>
+  )
+}

generator/konfig-next-app/src/components/LinkIcon.tsx

@@ -1,5 +1,5 @@
 import { linkColor } from '@/utils/link-color'
-import { useMantineColorScheme, useMantineTheme } from '@mantine/core'
+import { useMantineTheme } from '@mantine/core'
 
 export function LinkIcon() {
   const theme = useMantineTheme()

generator/konfig-next-app/src/components/OperationFormGeneratedCode.tsx

@@ -6,6 +6,7 @@ import { DefaultProps } from '@mantine/core'
 import { CodeGeneratorPython } from '@/utils/code-generator-python'
 import { Language } from './DemoCode'
 import { CodeGeneratorHttpsnippet } from '@/utils/code-generator-httpsnippet'
+import { CopyButton } from './CopyButton'
 
 export function OperationFormGeneratedCode(
   args: CodeGeneratorConstructorArgs & { language: Language }
@@ -45,8 +46,11 @@ export function OperationFormGeneratedCode(
   }
 
   return (
-    <Prism withLineNumbers {...styles} language={args.language}>
-      {data}
-    </Prism>
+    <div className="relative group">
+      <Prism noCopy withLineNumbers {...styles} language={args.language}>
+        {data}
+      </Prism>
+      <CopyButton value="" />
+    </div>
   )
 }

generator/konfig-next-app/src/utils/generate-mantine-theme-colors.ts

@@ -12,14 +12,17 @@ export function generateMantineThemeColors({
 }): {
   colors: Partial<MantineThemeColors>
 } {
-  const color =
-    primaryColor !== undefined && primaryColor != null
-      ? generateShadePalette(primaryColor)
-      : colors.blue
+  const seedColor =
+    primaryColor !== null && primaryColor !== undefined
+      ? primaryColor
+      : colors.blue[6]
+
+  const color = generateShadePalette(seedColor)
+  const rgbColors = generateShadePalette(seedColor, true)
 
   if (typeof window !== 'undefined') {
     // create CSS variables for every color shade labeled as --color-brand-50, --color-brand-100, etc.
-    for (const [key, value] of Object.entries(color)) {
+    for (const [key, value] of Object.entries(rgbColors)) {
       document.documentElement.style.setProperty(
         `--color-${label}-${key}00`,
         value

generator/konfig-next-app/src/utils/generate-shade-palette.ts

@@ -3,7 +3,10 @@ import chroma from 'chroma-js'
 const LIGHTNESS_MAP = [0.97, 0.94, 0.9, 0.85, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3]
 const SATURATION_MAP = [0.32, 0.16, 0.08, 0.04, 0, 0, 0.04, 0.08, 0.16, 0.32]
 
-export const generateShadePalette = (color: string): Tuple<string, 10> => {
+export const generateShadePalette = (
+  color: string,
+  rgb?: boolean
+): Tuple<string, 10> => {
   const colorChroma = chroma(color)
 
   const lightnessGoal = colorChroma.get('hsl.l')
@@ -24,5 +27,7 @@ export const generateShadePalette = (color: string): Tuple<string, 10> => {
         : color.desaturate(saturationDelta * -1)
     })
 
-  return colors.map((color) => color.hex()) as Tuple<string, 10>
+  return colors.map((color) =>
+    rgb ? color.rgb().join(' ') : color.hex()
+  ) as Tuple<string, 10>
 }

generator/konfig-next-app/tailwind.config.js

@@ -4,18 +4,21 @@ module.exports = {
   content: ['./src/**/*.{js,jsx,ts,tsx}'],
   theme: {
     extend: {
+      opacity: {
+        2.5: '.025',
+      },
       colors: {
         brand: {
           // 100-900 from css variables --color-brand-100, --color-brand-200, etc.
-          100: 'var(--color-brand-100)',
-          200: 'var(--color-brand-200)',
-          300: 'var(--color-brand-300)',
-          400: 'var(--color-brand-400)',
-          500: 'var(--color-brand-500)',
-          600: 'var(--color-brand-600)',
-          700: 'var(--color-brand-700)',
-          800: 'var(--color-brand-800)',
-          900: 'var(--color-brand-900)',
+          100: 'rgb(var(--color-brand-100) / <alpha-value>)',
+          200: 'rgb(var(--color-brand-200) / <alpha-value>)',
+          300: 'rgb(var(--color-brand-300) / <alpha-value>)',
+          400: 'rgb(var(--color-brand-400) / <alpha-value>)',
+          500: 'rgb(var(--color-brand-500) / <alpha-value>)',
+          600: 'rgb(var(--color-brand-600) / <alpha-value>)',
+          700: 'rgb(var(--color-brand-700) / <alpha-value>)',
+          800: 'rgb(var(--color-brand-800) / <alpha-value>)',
+          900: 'rgb(var(--color-brand-900) / <alpha-value>)',
         },
         'mantine-gray': '#868e96',
         'mantine-gray': {