improvement: incorporate radix color scaling (#794)

fern-api · May 3, 2024 · d672f78 · d672f78
1 parent 82661a8
commit d672f78
Show file tree

Hide file tree

Showing 25 changed files with 782 additions and 256 deletions.
diff --git a/packages/ui/app/.storybook/variables.css b/packages/ui/app/.storybook/variables.css
@@ -24,12 +24,12 @@
     --grayscale-a10: var(--sand-a10);
     --grayscale-a11: var(--sand-a11);
     --grayscale-a12: var(--sand-a12);
-    --accent-primary: 65, 131, 38;
-    --accent-primary-aa: 65, 131, 38;
-    --accent-primary-aaa: 49, 99, 29;
-    --accent-primary-tinted: 55, 111, 32;
+    --accent: 65, 131, 38;
+    --accent-aa: 65, 131, 38;
+    --accent-aaa: 49, 99, 29;
+    --accent-tinted: 55, 111, 32;
     --background: 255, 255, 255;
-    --accent-primary-contrast: 255, 255, 255;
+    --accent-contrast: 255, 255, 255;
     --card-background: rgba(255, 255, 255, 70%);
     --sidebar-background: transparent;
     --header-background: transparent;
@@ -58,12 +58,12 @@
     --grayscale-a10: var(--olive-a10);
     --grayscale-a11: var(--olive-a11);
     --grayscale-a12: var(--olive-a12);
-    --accent-primary: 173, 255, 140;
-    --accent-primary-aa: 173, 255, 140;
-    --accent-primary-aaa: 173, 255, 140;
-    --accent-primary-tinted: 191, 255, 165;
+    --accent: 173, 255, 140;
+    --accent-aa: 173, 255, 140;
+    --accent-aaa: 173, 255, 140;
+    --accent-tinted: 191, 255, 165;
     --background: 0, 0, 0;
-    --accent-primary-contrast: 0, 0, 0;
+    --accent-contrast: 0, 0, 0;
     --card-background: var(--grayscale-a2);
     --sidebar-background: transparent;
     --header-background: transparent;

diff --git a/packages/ui/app/package.json b/packages/ui/app/package.json
@@ -60,7 +60,9 @@
     "@shikijs/transformers": "^1.2.2",
     "@types/nprogress": "^0.2.3",
     "algoliasearch": "^4.22.1",
+    "bezier-easing": "^2.1.0",
     "clsx": "^2.1.0",
+    "colorjs.io": "^0.5.0",
     "estree-util-visit": "^2.0.0",
     "github-slugger": "^2.0.0",
     "gray-matter": "^4.0.3",

diff --git a/packages/ui/app/src/api-page/endpoints/EndpointContentLeft.tsx b/packages/ui/app/src/api-page/endpoints/EndpointContentLeft.tsx
@@ -148,7 +148,7 @@ const UnmemoizedEndpointContentLeft: React.FC<EndpointContentLeft.Props> = ({
                                         <Tabs.Trigger
                                             key={requestBody.contentType}
                                             value={requestBody.contentType}
-                                            className="group flex min-h-10 cursor-default items-center px-0 py-2 data-[state=active]:shadow-[inset_0_-2px_0_0_rgba(0,0,0,0.1)] data-[state=active]:shadow-accent-primary"
+                                            className="group flex min-h-10 cursor-default items-center px-0 py-2 data-[state=active]:shadow-[inset_0_-2px_0_0_rgba(0,0,0,0.1)] data-[state=active]:shadow-accent"
                                         >
                                             <span className="t-muted rounded px-2 py-1 text-xs group-data-[state=active]:t-default group-hover:bg-tag-default group-data-[state=active]:font-semibold">
                                                 {requestBody.contentType}

diff --git a/packages/ui/app/src/api-page/examples/CodeSnippetExample.tsx b/packages/ui/app/src/api-page/examples/CodeSnippetExample.tsx
@@ -78,7 +78,7 @@ const CodeSnippetExampleInternal: FC<CodeSnippetExample.Props> = ({
             copyToClipboardText={useCallback(() => code, [code])}
             {...props}
             className={clsx(className, {
-                "dark bg-card": isDarkCodeEnabled,
+                "dark bg-card-solid": isDarkCodeEnabled,
             })}
         >
             <FernSyntaxHighlighter

diff --git a/packages/ui/app/src/api-page/types/object/ObjectProperty.tsx b/packages/ui/app/src/api-page/types/object/ObjectProperty.tsx
@@ -111,7 +111,7 @@ const UnmemoizedObjectPropertyInternal = forwardRef<HTMLDivElement, ObjectProper
             data-route={anchorRoute.toLowerCase()}
             className={cn("py-3 scroll-mt-header-height-padded space-y-2", {
                 "px-3": !contextValue.isRootTypeDefinition,
-                "outline-accent-primary outline-1 outline outline-offset-4 rounded-sm": isActive,
+                "outline-accent outline-1 outline outline-offset-4 rounded-sm": isActive,
             })}
         >
             <div className="flex items-baseline gap-2">

diff --git a/packages/ui/app/src/api-playground/PlaygroundButton.tsx b/packages/ui/app/src/api-playground/PlaygroundButton.tsx
@@ -16,7 +16,7 @@ export const PlaygroundButton: FC<{ state: PlaygroundSelectionState }> = ({ stat
             <FernTooltip
                 content={
                     <span>
-                        Customize and run in <span className="font-semibold text-accent-primary">API Playground</span>
+                        Customize and run in <span className="font-semibold t-accent">API Playground</span>
                     </span>
                 }
             >

diff --git a/packages/ui/app/src/api-playground/PlaygroundWebSocketSessionForm.tsx b/packages/ui/app/src/api-playground/PlaygroundWebSocketSessionForm.tsx
@@ -114,7 +114,7 @@ export const PlaygroundWebSocketSessionForm: FC<PlaygroundWebSocketSessionFormPr
 
                             <span
                                 className={cn("-mr-1 inline-flex items-center gap-2 rounded-lg px-2 py-0.5", {
-                                    "bg-tag-primary text-accent": connected,
+                                    "bg-tag-primary t-accent": connected,
                                     "bg-tag-danger text-intent-danger": !connected,
                                 })}
                             >

diff --git a/packages/ui/app/src/commons/withStream.tsx b/packages/ui/app/src/commons/withStream.tsx
@@ -5,8 +5,8 @@ export function StreamTag({ small = false, active = false }: { small?: boolean;
     return (
         <span
             className={cn("uppercase font-mono inline-flex justify-center items-center leading-none", {
-                ["bg-accent-primary/10 dark:bg-accent-primary-dark/10 text-accent-primary-aaa"]: !active,
-                ["bg-accent-primary dark:bg-accent-primary-dark t-accent-contrast"]: active,
+                ["bg-accent/10 dark:bg-accent-dark/10 text-accent-aaa"]: !active,
+                ["bg-accent dark:bg-accent-dark t-accent-contrast"]: active,
                 ["rounded-md h-[18px] text-[10px] w-9"]: small,
                 ["py-1 px-2 rounded-lg h-6 text-xs"]: !small,
             })}

diff --git a/packages/ui/app/src/commons/withWss.tsx b/packages/ui/app/src/commons/withWss.tsx
@@ -7,8 +7,8 @@ export function WssTag({ small = false, active = false }: { small?: boolean; act
         <FernTooltip content="WebSocket Channel">
             <span
                 className={cn("uppercase font-mono inline-flex justify-center items-center leading-none", {
-                    ["bg-accent-primary/10 dark:bg-accent-primary-dark/10 text-accent-primary-aaa"]: !active,
-                    ["bg-accent-primary dark:bg-accent-primary-dark t-accent-contrast"]: active,
+                    ["bg-accent/10 dark:bg-accent-dark/10 text-accent-aaa"]: !active,
+                    ["bg-accent dark:bg-accent-dark t-accent-contrast"]: active,
                     ["rounded-md h-[18px] text-[10px] w-9"]: small,
                     ["py-1 px-2 rounded-lg h-6 text-xs"]: !small,
                 })}

diff --git a/packages/ui/app/src/components/FernAudioPlayer.tsx b/packages/ui/app/src/components/FernAudioPlayer.tsx
@@ -78,7 +78,7 @@ export function FernAudioPlayer(props: FernAudioPlayerProps): ReactElement {
                             }}
                         />
                         <FernButton
-                            icon={isPlaying ? <Pause /> : <Play className="-mr-0.5 fill-accent-primary-contrast" />}
+                            icon={isPlaying ? <Pause /> : <Play className="-mr-0.5 fill-accent-contrast" />}
                             variant="filled"
                             intent="primary"
                             rounded

diff --git a/packages/ui/app/src/components/FernCheckbox.css b/packages/ui/app/src/components/FernCheckbox.css
@@ -15,5 +15,5 @@
 }
 
 .fern-checkbox-indicator {
-    @apply size-4 bg-accent flex items-center justify-center text-accent-primary-contrast rounded-sm;
+    @apply size-4 bg-accent flex items-center justify-center text-accent-contrast rounded-sm;
 }
diff --git a/packages/ui/app/src/components/FernTabs.tsx b/packages/ui/app/src/components/FernTabs.tsx
@@ -16,7 +16,7 @@ export const FernTabs: FC<FernTabsProps> = ({ tabs, ...props }) => {
             <RadixTabs.List className="border-default mb-6 mt-0 flex gap-4 border-b">
                 {tabs.map(({ title }, idx) => (
                     <RadixTabs.Trigger key={idx} value={idx.toString()} asChild>
-                        <h6 className="text-default -mb-px flex max-w-max cursor-default scroll-mt-header-height-padded whitespace-nowrap border-b border-transparent pb-2.5 pt-3 text-sm font-semibold leading-6 hover:border-default data-[state=active]:t-accent data-[state=active]:border-accent-primary">
+                        <h6 className="text-default -mb-px flex max-w-max cursor-default scroll-mt-header-height-padded whitespace-nowrap border-b border-transparent pb-2.5 pt-3 text-sm font-semibold leading-6 hover:border-default data-[state=active]:t-accent data-[state=active]:border-accent">
                             {title}
                         </h6>
                     </RadixTabs.Trigger>

diff --git a/packages/ui/app/src/docs/BgImageGradient.tsx b/packages/ui/app/src/docs/BgImageGradient.tsx
@@ -19,9 +19,9 @@ export const BgImageGradient: FC<BgImageGradient.Props> = ({ className }) => {
     return (
         <div
             className={cn(className, "fern-background", {
-                "from-accent-primary/10 bg-gradient-to-b to-transparent":
+                "from-accent/10 bg-gradient-to-b to-transparent":
                     lightBackground?.type === "gradient" && lightBackgroundImage == null,
-                "dark:from-accent-primary/10 dark:bg-gradient-to-b dark:to-transparent":
+                "dark:from-accent/10 dark:bg-gradient-to-b dark:to-transparent":
                     darkBackground?.type === "gradient" && darkBackgroundImage == null,
                 "dark:from-transparent": darkBackground?.type === "solid" && darkBackgroundImage == null,
                 "fern-background-image": lightBackgroundImage != null,

diff --git a/packages/ui/app/src/docs/HeaderTabs.tsx b/packages/ui/app/src/docs/HeaderTabs.tsx
@@ -11,7 +11,7 @@ export function HeaderTabs(): ReactElement {
                 {tabs.map((tab) => (
                     <li key={tab.index} className="group">
                         <FernLink
-                            className="group/tab-button relative flex min-h-[32px] min-w-0 flex-1 select-none items-center justify-start p-3 text-base data-[state=inactive]:t-muted data-[state=active]:t-accent data-[state=inactive]:hover:t-default group-first:pl-0 group-first:after:left-0 group-last:pr-0 group-last:after:right-0 group-hover/tab-button:transition data-[state=active]:after:absolute data-[state=active]:after:inset-x-3 data-[state=active]:after:bottom-0 data-[state=active]:after:h-px data-[state=active]:after:bg-accent-primary data-[state=active]:after:content-[''] lg:min-h-[36px] lg:text-sm"
+                            className="group/tab-button relative flex min-h-[32px] min-w-0 flex-1 select-none items-center justify-start p-3 text-base data-[state=inactive]:t-muted data-[state=active]:t-accent data-[state=inactive]:hover:t-default group-first:pl-0 group-first:after:left-0 group-last:pr-0 group-last:after:right-0 group-hover/tab-button:transition data-[state=active]:after:absolute data-[state=active]:after:inset-x-3 data-[state=active]:after:bottom-0 data-[state=active]:after:h-px data-[state=active]:after:bg-accent data-[state=active]:after:content-[''] lg:min-h-[36px] lg:text-sm"
                             href={tab.type === "tabGroup" ? `/${tab.slug.join("/")}` : tab.url}
                             data-state={tab.index === currentTabIndex ? "active" : "inactive"}
                         >

diff --git a/packages/ui/app/src/mdx/components/Badge.tsx b/packages/ui/app/src/mdx/components/Badge.tsx
@@ -26,7 +26,7 @@ export function Badge({
                     "text-white dark:text-black": !minimal && intent !== "primary",
                     "dark:ring-white/30 ring-black/30": outlined,
                     "bg-intent-default": intent === "none",
-                    "bg-accent-primary text-accent-primary-contrast": intent === "primary" && !minimal,
+                    "bg-accent text-accent-contrast": intent === "primary" && !minimal,
                     "bg-intent-success": intent === "success" && !minimal,
                     "bg-intent-warning": intent === "warning" && !minimal,
                     "bg-intent-danger": intent === "danger" && !minimal,

diff --git a/packages/ui/app/src/mdx/components/CodeGroup.tsx b/packages/ui/app/src/mdx/components/CodeGroup.tsx
@@ -23,7 +23,7 @@ export const CodeGroup: React.FC<React.PropsWithChildren<CodeGroup.Props>> = ({
     const containerClass = clsx(
         "after:ring-default bg-card relative mt-4 first:mt-0 mb-6 flex w-full min-w-0 max-w-full flex-col rounded-lg shadow-sm after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:ring-1 after:ring-inset after:content-['']",
         {
-            "dark bg-card": isDarkCodeEnabled,
+            "dark bg-card-solid": isDarkCodeEnabled,
         },
     );
 
@@ -61,7 +61,7 @@ export const CodeGroup: React.FC<React.PropsWithChildren<CodeGroup.Props>> = ({
                                 <Tabs.Trigger
                                     key={idx}
                                     value={idx.toString()}
-                                    className="group  flex min-h-10 items-center px-2 py-1.5 data-[state=active]:shadow-[inset_0_-2px_0_0_rgba(0,0,0,0.1)] data-[state=active]:shadow-accent-primary"
+                                    className="group  flex min-h-10 items-center px-2 py-1.5 data-[state=active]:shadow-[inset_0_-2px_0_0_rgba(0,0,0,0.1)] data-[state=active]:shadow-accent"
                                 >
                                     <span className="t-muted whitespace-nowrap rounded px-2 py-1 text-sm group-data-[state=active]:t-default group-hover:bg-tag-default group-data-[state=active]:font-semibold">
                                         {item.title ?? `Untitled ${idx + 1}`}

diff --git a/packages/ui/app/src/mdx/components/Tabs.tsx b/packages/ui/app/src/mdx/components/Tabs.tsx
@@ -35,7 +35,7 @@ export const TabGroup: FC<TabGroupProps> = ({ tabs, toc: parentToc = true }) =>
                     return (
                         <RadixTabs.Trigger key={idx} value={idx.toString()} asChild>
                             <h6
-                                className="text-default -mb-px flex max-w-max cursor-pointer scroll-mt-header-height-padded whitespace-nowrap border-b border-transparent pb-2.5 pt-3 text-sm font-semibold leading-6 hover:border-default data-[state=active]:t-accent data-[state=active]:border-accent-primary"
+                                className="text-default -mb-px flex max-w-max cursor-pointer scroll-mt-header-height-padded whitespace-nowrap border-b border-transparent pb-2.5 pt-3 text-sm font-semibold leading-6 hover:border-default data-[state=active]:t-accent data-[state=active]:border-accent"
                                 id={id}
                                 data-anchor={toc ? id : undefined}
                             >

diff --git a/packages/ui/app/src/next-app/globals.scss b/packages/ui/app/src/next-app/globals.scss
@@ -38,7 +38,7 @@
 
     /* 
     html.dark {
-        background-color: var(--accent-primary);
+        background-color: var(--accent);
     } */
 
     *,
@@ -707,7 +707,7 @@
 
         &.interactive {
             @apply cursor-pointer shadow-card;
-            @apply hover:shadow-card-elevated hover:border-accent-primary transition-all;
+            @apply hover:shadow-card-elevated hover:border-accent transition-all;
             @apply active:shadow-card-elevated active:border-primary;
 
             &.active {
@@ -767,7 +767,7 @@
     }
 
     .fern-numeric-input-group:focus-within .fern-numeric-input-step {
-        @apply ring-accent-primary hover:bg-tag-primary t-accent hover:t-accent border-primary;
+        @apply ring-accent hover:bg-tag-primary t-accent hover:t-accent border-primary;
     }
 
     .fern-numeric-input-group .fern-numeric-input-step:first-child {
@@ -780,7 +780,7 @@
 
     .fern-input,
     .fern-textarea {
-        @apply caret-accent-primary py-2 px-2.5 text-sm;
+        @apply caret-accent py-2 px-2.5 text-sm;
         @apply max-sm:text-base;
     }
 
@@ -795,7 +795,7 @@
     }
 
     .fern-mdx-link {
-        @apply hover:t-accent underline underline-offset-4 decoration-1 hover:decoration-2 decoration-accent-primary-aa;
+        @apply hover:t-accent underline underline-offset-4 decoration-1 hover:decoration-2 decoration-accent-aa;
         @apply font-semibold;
 
         h1 &,