paris 0.2.2 → 0.3.0

package/src/stories/theme/themes.ts

@@ -2,6 +2,7 @@ import { createTheme } from 'pte';
 import type { CSSColor, CSSLength } from '@ssh/csstypes';
 import type { Property } from 'csstype';
 import type { PartialDeep } from 'type-fest';
+import merge from 'ts-deepmerge';
 import { Tokens as T } from './tokens';
 import type { TokensT } from './tokens';
 
@@ -16,6 +17,20 @@ export type FontDefinition = {
 
 export type FontClassDefinition = Omit<FontDefinition, 'fontSize' | 'lineHeight'>;
 
+export type ShadowDefinition = `${CSSLength} ${CSSLength} ${CSSLength} ${CSSColor}` | 'none';
+
+const Shadows = {
+    shallowBelow: '0px 4px 20px rgba(0, 0, 0, 0.2)',
+    deepBelow: '0px 8px 20px rgba(0, 0, 0, 0.2)',
+    shallowAbove: '0px -4px 20px rgba(0, 0, 0, 0.2)',
+    deepAbove: '0px -8px 20px rgba(0, 0, 0, 0.2)',
+    shallowPopup: '0px 0px 30px rgba(0, 0, 0, 0.2)',
+    deepPopup: '0px 0px 40px rgba(0, 0, 0, 0.2)',
+    subtlePopup: '0px 0px 10px rgba(0, 0, 0, 0.1)',
+    shallowLeft: '-20px 0px 40px rgba(0, 0, 0, 0.1)',
+    shallowRight: '20px 0px 40px rgba(0, 0, 0, 0.1)',
+} as const;
+
 export type Theme = {
     tokens: TokensT,
     colors: {
@@ -91,6 +106,7 @@ export type Theme = {
         fontFamily: string,
         boldFontWeight: number,
         italicLetterSpacing: CSSLength,
+        verticalMetricsAdjust: CSSLength;
 
         styles: {
             // Display
@@ -124,6 +140,17 @@ export type Theme = {
             paragraphXXSmall: FontDefinition,
         }
     },
+    lighting: {
+        shallowBelow: ShadowDefinition,
+        deepBelow: ShadowDefinition,
+        shallowAbove: ShadowDefinition,
+        deepAbove: ShadowDefinition,
+        shallowPopup: ShadowDefinition,
+        deepPopup: ShadowDefinition,
+        subtlePopup: ShadowDefinition,
+        shallowLeft: ShadowDefinition,
+        shallowRight: ShadowDefinition,
+    },
     borders: {
         // Border Radius
         radius: {
@@ -134,6 +161,13 @@ export type Theme = {
             roundedSmall: CSSLength,
             roundedLarge: CSSLength,
         },
+
+        // Dropdowns (Select, Menu, Popovers, etc.)
+
+        dropdown: {
+            color: CSSColor,
+            shadow: ShadowDefinition,
+        }
     },
     animations: {
         interaction: string,
@@ -245,6 +279,7 @@ export const LightTheme: Theme = {
         fontFamily: '"Graphik Web", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif',
         boldFontWeight: 500,
         italicLetterSpacing: '-0.01em',
+        verticalMetricsAdjust: '1px',
 
         styles: {
             // Display
@@ -350,6 +385,9 @@ export const LightTheme: Theme = {
             },
         },
     },
+    lighting: {
+        ...Shadows,
+    },
     borders: {
         radius: {
             pill: '1000px',
@@ -359,17 +397,19 @@ export const LightTheme: Theme = {
             roundedSmall: '4px',
             roundedLarge: '12px',
         },
+
+        dropdown: {
+            shadow: Shadows.deepBelow,
+            color: 'transparent',
+        },
     },
     animations: {
-        interaction: '0.2s cubic-bezier(0.25, 1, 0.5, 1)',
+        interaction: '200ms cubic-bezier(0.5, 1, 0.89, 1)',
     },
 };
 
-export const DarkTheme: Theme = {
-    ...LightTheme,
+export const DarkTheme: Theme = merge(LightTheme, {
     colors: {
-        ...LightTheme.colors,
-
         // Reverse all inverse colors
 
         contentPrimary: LightTheme.colors.contentInversePrimary,
@@ -397,7 +437,13 @@ export const DarkTheme: Theme = {
         borderInverseOpaque: LightTheme.colors.borderOpaque,
         borderInverseSelected: LightTheme.colors.borderSelected,
     },
-};
+    borders: {
+        dropdown: {
+            shadow: 'none',
+            color: T.colors.grey600,
+        },
+    },
+} as PartialDeep<Theme>) as Theme;
 
 export const {
     theme,

package/src/stories/theme/util.scss

@@ -0,0 +1,8 @@
+@mixin flex-row {
+    display: flex;
+    flex-direction: row;
+}
+
+.bold {
+    font-weight: var(--pte-typography-boldFontWeight);
+}

package/src/types/Enhancer.ts

@@ -0,0 +1,3 @@
+import type { ReactNode } from 'react';
+
+export type Enhancer = ReactNode | (({ size }: { size: number }) => ReactNode);

package/src/styles/util.scss

@@ -1,4 +0,0 @@
-.flex-row {
-    display: flex;
-    flex-direction: row;
-}