paris 0.8.13 → 0.8.15

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # paris
 
+## 0.8.15
+
+### Patch Changes
+
+- 5e230d9: Add 'new' variant Tag
+
+## 0.8.14
+
+### Patch Changes
+
+- effd11c: Adjust height of drawer header to design
+
 ## 0.8.13
 
 ### Patch Changes

package/package.json

@@ -2,7 +2,7 @@
   "name": "paris",
   "author": "Sanil Chawla <sanil@slingshot.fm> (https://sanil.co)",
   "description": "Paris is Slingshot's React design system. It's a collection of reusable components, design tokens, and guidelines that help us build consistent, accessible, and performant user interfaces.",
-  "version": "0.8.13",
+  "version": "0.8.15",
   "homepage": "https://paris.slingshot.fm",
   "license": "MIT",
   "repository": {

package/src/stories/drawer/Drawer.module.scss

@@ -206,7 +206,6 @@ $panelAnimationDelay: var(--pte-animations-duration-fast);
     //padding: $panelPaddingY $panelPaddingX;
     background-color: var(--pte-colors-backgroundPrimary);
     overflow: auto;
-    border: 1px solid transparent;
 
     display: flex;
     flex-direction: column;
@@ -256,7 +255,7 @@ $panelAnimationDelay: var(--pte-animations-duration-fast);
     align-items: center;
 
     border-bottom: 1px solid var(--pte-colors-borderOpaque);
-    padding: 20px;
+    padding: 14px 16px;
 }
 
 .titleBarButtons {

package/src/stories/drawer/Drawer.tsx

@@ -327,7 +327,6 @@ export const Drawer = <T extends string[] | readonly string[] = string[]>({
                                         <Button
                                             kind="tertiary"
                                             shape="circle"
-                                            size="small"
                                             onClick={() => onClose(false)}
                                             startEnhancer={(
                                                 <Icon icon={Close} size={20} />

package/src/stories/tag/Tag.module.scss

@@ -44,3 +44,9 @@
     color: var(--pte-colors-contentNegative);
     border-color: var(--pte-colors-contentNegative);
 }
+
+.new {
+    border: 1px solid var(--pte-colors-borderAccent);
+    background-color: var(--pte-tokens-colors-teal200);
+    box-shadow: 0px 0px 10px 0px color-mix(in srgb, var(--pte-colors-contentAccent) 30%, transparent);
+}

package/src/stories/tag/Tag.stories.ts

@@ -30,3 +30,11 @@ export const Compact: Story = {
         kind: 'negative',
     },
 };
+
+export const New: Story = {
+    args: {
+        children: 'New',
+        size: 'compact',
+        kind: 'new',
+    },
+};

package/src/stories/tag/Tag.tsx

@@ -7,7 +7,7 @@ export type TagProps = {
     /** The size of the Tag. */
     size?: 'normal' | 'compact';
     /** The kind of Tag. */
-    kind?: 'default' | 'secondary' | 'positive' | 'warning' | 'negative';
+    kind?: 'default' | 'secondary' | 'positive' | 'warning' | 'negative' | 'new';
     /** The contents of the Tag. */
     children: ReactNode;
 };