tweak button vars

v2/pink-sb/src/lib/Root.svelte

@@ -11,10 +11,9 @@
 </script>
 
 <svelte:head>
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
+    <link rel="preconnect" href="https://fonts.bunny.net" />
     <link
-        href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
+        href="https://fonts.bunny.net/css?family=fira-code:300,400,500,600,700"
         rel="stylesheet"
     />
 </svelte:head>
@@ -27,8 +26,11 @@
     :root {
         --sans-fallbacks: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
         --mono-fallbacks: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
-        color: var(--fgcolor-neutral-secondary);
-        background-color: var(--bgcolor-neutral-primary);
+        --p-root-color: var(--root-color, var(--fgcolor-neutral-secondary));
+        --p-root-background-color: var(--root-background-color, var(--bgcolor-neutral-primary));
+
+        color: var(--p-root-color);
+        background-color: var(--p-root-background-color);
         font-size: var(--font-size-s);
         font-family: var(--font-family-sansserif), var(--sans-fallbacks);
         font-style: normal;

v2/pink-sb/src/lib/button/Button.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
     import Badge from '$lib/Badge.svelte';
     import type { HTMLButtonAttributes } from 'svelte/elements';
-    import type { ButtonProps } from './index.js';
+    import { type ButtonProps, BUTTON_SPLIT_CONTEXT } from './index.js';
+    import { getContext } from 'svelte';
 
     type $$Props = HTMLButtonAttributes & Partial<ButtonProps>;
     /**
@@ -24,6 +25,8 @@
     function getBadgeVariant(variant: $$Props['variant']): 'accent' | 'secondary' {
         return variant === 'primary' ? 'accent' : 'secondary';
     }
+
+    const isSplit = getContext(BUTTON_SPLIT_CONTEXT);
 </script>
 
 <button
@@ -41,6 +44,7 @@
     class:extra-compact={variant === 'extra-compact'}
     class:ghost={variant === 'ghost'}
     class:danger={variant === 'danger'}
+    class:split={isSplit}
     {...$$restProps}
 >
     {#if $$slots.start}

v2/pink-sb/src/lib/button/Split.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+    import { setContext } from 'svelte';
+    import { BUTTON_SPLIT_CONTEXT } from './index.js';
+
+    setContext(BUTTON_SPLIT_CONTEXT, true);
+</script>
+
+<div>
+    <slot />
+</div>
+
+<style lang="scss">
+    div {
+        display: inline-flex;
+        flex-direction: row;
+    }
+</style>

v2/pink-sb/src/lib/button/_button.scss

@@ -4,7 +4,7 @@
     @include transitions.common;
 
     --p-button-width: var(--button-width);
-    --p-button-background-color: var(--button-background-color);
+    --p-button-background: var(--button-background);
     --p-button-border: var(--button-border, none);
     --p-button-border-radius: var(--button-border-radius, var(--border-radius-s));
     --p-button-box-shadow: var(--button-box-shadow, none);
@@ -15,6 +15,7 @@
     --p-button-gap: var(--button-gap, var(--space-3));
     --p-button-padding-block: var(--button-padding-block, var(--space-5));
     --p-button-padding-inline: var(--button-padding-inline, var(--space-6));
+    --p-button-box-shadow: var(--button-box-shadow, none);
 
     display: inline-flex;
     gap: var(--p-button-gap);
@@ -25,11 +26,12 @@
     align-items: center;
     width: var(--p-button-width);
     white-space: nowrap;
-    background-color: var(--p-button-background-color);
+    background: var(--p-button-background);
     border: var(--p-button-border);
     border-radius: var(--p-button-border-radius);
     color: var(--p-button-color);
     cursor: pointer;
+    box-shadow: var(--p-button-box-shadow);
 
     outline-offset: var(--border-width-s);
 
@@ -86,44 +88,44 @@
     }
 
     &.primary {
-        background-color: var(--bgcolor-accent);
+        background: var(--bgcolor-accent);
         border: var(--border-width-s) solid var(--bgcolor-accent);
 
         &:hover {
-            background-color: var(--bgcolor-accent-secondary);
+            background: var(--bgcolor-accent-secondary);
             border: var(--border-width-s) solid var(--bgcolor-accent-secondary);
         }
         &:active {
-            background-color: var(--bgcolor-accent-tertiary);
+            background: var(--bgcolor-accent-tertiary);
             border: var(--border-width-s) solid var(--bgcolor-accent-tertiary);
         }
         &:focus-visible {
             outline: var(--border-width-l) solid var(--border-focus);
         }
         &:disabled,
         &[aria-disabled='true'] {
-            background-color: var(--bgcolor-neutral-invert-weaker);
+            background: var(--bgcolor-neutral-invert-weaker);
             border: var(--border-width-s) solid var(--bgcolor-neutral-invert-weaker);
         }
     }
 
     &.secondary {
         color: var(--fgcolor-neutral-secondary);
-        background-color: var(--bgcolor-neutral-primary);
+        background: var(--bgcolor-neutral-primary);
         border: var(--border-width-s) solid var(--border-neutral);
 
         &:hover {
-            background-color: var(--bgcolor-neutral-secondary);
+            background: var(--bgcolor-neutral-secondary);
         }
         &:active {
-            background-color: var(--bgcolor-neutral-tertiary);
+            background: var(--bgcolor-neutral-tertiary);
         }
         &:focus-visible {
             outline: var(--border-width-l) solid var(--border-focus);
         }
         &:disabled,
         &[aria-disabled='true'] {
-            background-color: var(--bgcolor-neutral-primary);
+            background: var(--bgcolor-neutral-primary);
         }
         .start,
         .end {
@@ -133,23 +135,23 @@
 
     &.text {
         color: var(--fgcolor-neutral-secondary);
-        background-color: transparent;
+        background: transparent;
         border: var(--border-width-s) solid transparent;
 
         &:hover {
-            background-color: var(--bgcolor-neutral-secondary);
+            background: var(--bgcolor-neutral-secondary);
             border: var(--border-width-s) solid var(--bgcolor-neutral-secondary);
         }
         &:active {
-            background-color: var(--bgcolor-neutral-tertiary);
+            background: var(--bgcolor-neutral-tertiary);
             border: var(--border-width-s) solid var(--bgcolor-neutral-tertiary);
         }
         &:focus-visible {
             outline: var(--border-width-l) solid var(--border-focus);
         }
         &:disabled,
         &[aria-disabled='true'] {
-            background-color: var(--bgcolor-neutral-primary);
+            background: var(--bgcolor-neutral-primary);
             border: var(--border-width-s) solid var(--bgcolor-neutral-primary);
         }
         .start,
@@ -160,40 +162,40 @@
 
     &.ghost {
         color: var(--fgcolor-neutral-tertiary);
-        background-color: transparent;
+        background: transparent;
         border: var(--border-width-s) solid transparent;
 
         &:hover {
             color: var(--fgcolor-neutral-secondary);
-            background-color: var(--overlay-neutral-hover);
+            background: var(--overlay-neutral-hover);
         }
         &:active {
             color: var(--fgcolor-neutral-secondary);
-            background-color: var(--overlay-neutral-pressed);
+            background: var(--overlay-neutral-pressed);
         }
         &:focus-visible {
             outline: var(--border-width-l) solid var(--border-focus);
         }
     }
 
     &.danger {
-        background-color: var(--bgcolor-error-strong);
+        background: var(--bgcolor-error-strong);
         border: var(--border-width-s) solid var(--bgcolor-error-strong);
 
         &:hover {
-            background-color: var(--bgcolor-error-strong-secondary);
+            background: var(--bgcolor-error-strong-secondary);
             border: var(--border-width-s) solid var(--bgcolor-error-strong-secondary);
         }
         &:active {
-            background-color: var(--bgcolor-error-strong-tertiary);
+            background: var(--bgcolor-error-strong-tertiary);
             border: var(--border-width-s) solid var(--bgcolor-error-strong-tertiary);
         }
         &:focus-visible {
             outline: var(--border-width-l) solid var(--border-focus);
         }
         &:disabled,
         &[aria-disabled='true'] {
-            background-color: var(--bgcolor-neutral-invert-weaker);
+            background: var(--bgcolor-neutral-invert-weaker);
             border: var(--border-width-s) solid var(--bgcolor-neutral-invert-weaker);
         }
     }
@@ -219,4 +221,17 @@
             --p-button-padding-block: var(--space-0);
         }
     }
+
+    &.split {
+        &:not(:first-child) {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+            border-left-width: 0;
+        }
+
+        &:not(:last-child) {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+    }
 }

v2/pink-sb/src/lib/button/index.ts

@@ -7,3 +7,6 @@ export type ButtonProps = {
 
 export { default as Anchor } from './Anchor.svelte';
 export { default as Button } from './Button.svelte';
+export { default as Split } from './Split.svelte';
+
+export const BUTTON_SPLIT_CONTEXT = Symbol('button-split-context');

v2/pink-sb/src/lib/sidebar/Base.svelte

@@ -106,7 +106,7 @@
         }
 
         &.only-icons {
-            width: 66px;
+            width: 64px;
         }
     }
 

v2/pink-sb/src/stories/button/Split.stories.svelte

@@ -0,0 +1,52 @@
+<script context="module">
+    import { Icon } from '$lib/index.js';
+    import { Button, Split } from '$lib/button/index.js';
+    import { IconChevronDown } from '@appwrite.io/pink-icons-svelte';
+
+    export const meta = {
+        title: 'Components/Button/Split',
+        component: Split
+    };
+</script>
+
+<script lang="ts">
+    import { Story } from '@storybook/addon-svelte-csf';
+</script>
+
+<Story name="Default">
+    <Split>
+        <Button variant="secondary">First</Button>
+        <Button variant="secondary">Second</Button>
+        <Button variant="secondary">Third</Button>
+    </Split>
+</Story>
+
+<Story name="Small">
+    <Split>
+        <Button size="s" variant="secondary">First</Button>
+        <Button size="s" variant="secondary">Second</Button>
+        <Button size="s" variant="secondary">Third</Button>
+    </Split>
+</Story>
+<Story name="X-Small">
+    <Split>
+        <Button size="xs" variant="secondary">First</Button>
+        <Button size="xs" variant="secondary">Second</Button>
+        <Button size="xs" variant="secondary">Third</Button>
+    </Split>
+</Story>
+<Story name="With icon">
+    <Split>
+        <Button variant="secondary" size="s">Action text</Button>
+        <Button icon variant="secondary" size="s">
+            <Icon icon={IconChevronDown} />
+        </Button>
+    </Split>
+</Story>
+<Story name="Mixed">
+    <Split>
+        <Button>First</Button>
+        <Button variant="secondary">Second</Button>
+        <Button>Third</Button>
+    </Split>
+</Story>