paris 0.2.1 → 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/.changeset/README.md

@@ -1,8 +0,0 @@
-# Changesets
-
-Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
-with multi-package repos, or single-package repos to help you version and publish your code. You can
-find the full documentation for it [in our repository](https://github.com/changesets/changesets)
-
-We have a quick list of common questions to get you started engaging with this project in
-[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

package/.changeset/config.json

@@ -1,11 +0,0 @@
-{
-  "$schema": "https://unpkg.com/@changesets/config@2.3.0/schema.json",
-  "changelog": "@changesets/cli/changelog",
-  "commit": false,
-  "fixed": [],
-  "linked": [],
-  "access": "public",
-  "baseBranch": "main",
-  "updateInternalDependencies": "patch",
-  "ignore": []
-}

package/.eslintrc.json

@@ -1,22 +0,0 @@
-{
-    "root": true,
-    "extends": [
-        "@ssh",
-        "plugin:storybook/recommended",
-        "plugin:css/recommended"
-    ],
-    "plugins": [
-        "css"
-    ],
-    "parserOptions": {
-        "project": "./tsconfig.json"
-    },
-    "ignorePatterns": [
-        "dist/",
-        "node_modules/"
-    ],
-    "rules": {
-        "react/button-has-type": "off",
-        "react/jsx-props-no-spreading": "off"
-    }
-}

package/.github/workflows/publish.yml

@@ -1,54 +0,0 @@
-name: Publish
-on:
-  push:
-    branches:
-      - "main"
-
-concurrency: ${{ github.workflow }}-${{ github.ref }}
-
-jobs:
-  release:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-
-      - name: Install Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: 18.x
-
-      - uses: pnpm/action-setup@v2
-        name: Install pnpm
-        id: pnpm-install
-        with:
-          version: ^8.x
-          run_install: false
-
-      - name: Get pnpm store directory
-        id: pnpm-cache
-        shell: bash
-        run: |
-          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
-
-      - uses: actions/cache@v3
-        name: Setup pnpm cache
-        with:
-          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
-
-      - name: Install dependencies
-        run: pnpm install
-
-      - name: Create Release Pull Request or Publish
-        id: changesets
-        uses: changesets/action@v1
-        with:
-          publish: pnpm release
-          title: "chore(release): publish"
-          commit: "chore(release): publish"
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

package/.husky/pre-commit

@@ -1,2 +0,0 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"

package/.idea/inspectionProfiles/Project_Default.xml

@@ -1,7 +0,0 @@
-<component name="InspectionProjectProfileManager">
-  <profile version="1.0">
-    <option name="myName" value="Project Default" />
-    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
-    <inspection_tool class="JSLastCommaInObjectLiteral" enabled="false" level="WARNING" enabled_by_default="false" />
-  </profile>
-</component>

package/.idea/jsLibraryMappings.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="JavaScriptLibraryMappings">
-    <includedPredefinedLibrary name="Node.js Core" />
-  </component>
-</project>

package/.idea/jsLinters/eslint.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="EslintConfiguration">
-    <option name="fix-on-save" value="true" />
-  </component>
-</project>

package/.idea/modules.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/paris.iml" filepath="$PROJECT_DIR$/.idea/paris.iml" />
-    </modules>
-  </component>
-</project>

package/.idea/paris.iml

@@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="WEB_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$">
-      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
-      <excludeFolder url="file://$MODULE_DIR$/temp" />
-      <excludeFolder url="file://$MODULE_DIR$/tmp" />
-      <excludeFolder url="file://$MODULE_DIR$/storybook-static" />
-    </content>
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>

package/.idea/vcs.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="" vcs="Git" />
-  </component>
-</project>

package/.idea/watcherTasks.xml

@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectTasksOptions" suppressed-tasks="SCSS" />
-</project>

package/.storybook/main.ts

@@ -1,43 +0,0 @@
-import type { StorybookConfig } from "@storybook/nextjs";
-import { TsconfigPathsPlugin } from 'tsconfig-paths-webpack-plugin';
-
-const config: StorybookConfig = {
-    stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
-    addons: [
-        "@storybook/addon-links",
-        "@storybook/addon-essentials",
-        "@storybook/addon-interactions",
-        "storybook-dark-mode",
-    ],
-    framework: {
-        name: "@storybook/nextjs",
-        options: {},
-    },
-    docs: {
-        autodocs: "tag",
-    },
-    staticDirs: [
-        '../public'
-    ],
-    previewHead: (head) => (
-        `${head}
-<style>
-    body {
-        color: var(--pte-colors-contentPrimary);
-        background-color: var(--pte-colors-backgroundPrimary);
-        transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
-    }
-    
-    h2#stories {
-        letter-spacing: var(--pte-typography-styles-labelMedium-letterSpacing);
-    }
-</style>`
-    ),
-    webpackFinal: async (config) => {
-        config.resolve.plugins = [
-            new TsconfigPathsPlugin()
-        ];
-        return config;
-    }
-};
-export default config;

package/.storybook/manager-head.html

@@ -1,16 +0,0 @@
-<link rel="stylesheet" href="/graphik/graphik.css" />
-<link rel="stylesheet" href="/fira/fira_code.css" />
-
-<style>
-    .sidebar-subheading button {
-        letter-spacing: 0.1rem !important;
-    }
-    
-    * {
-        transition: color 0.2s ease, background-color 0.2s ease;
-    }
-    
-    #storybook-explorer-searchfield {
-        border-radius: 0;
-    }
-</style>

package/.storybook/manager.ts

@@ -1,6 +0,0 @@
-import { addons } from '@storybook/manager-api';
-import { Light, Dark } from './themes';
-
-addons.setConfig({
-    theme: Light,
-});

package/.storybook/preview.ts

@@ -1,74 +0,0 @@
-import type {  Preview } from '@storybook/react';
-import { Dark, Light } from './themes';
-import { DocsContainer } from '@storybook/blocks';
-import { useDarkMode } from 'storybook-dark-mode';
-import { createElement, useEffect } from 'react';
-import { injectTheme, LightTheme, DarkTheme } from '../src/stories/theme';
-
-import '../public/graphik/graphik.css';
-import '../public/fira/fira_code.css';
-import '../src/styles/globals.css';
-import '../src/styles/tw-preflight.css';
-
-const Wrapper = (props: any) => {
-    const isDark = useDarkMode();
-
-    useEffect(() => {
-        injectTheme(!isDark ? LightTheme : DarkTheme);
-    }, [isDark]);
-
-    return props.children;
-}
-
-export const decorators = [
-    (renderStory) => createElement(Wrapper, {}, renderStory()),
-];
-
-const preview: Preview = {
-    parameters: {
-        actions: { argTypesRegex: "^on[A-Z].*" },
-        backgrounds: { disable: true },
-        controls: {
-            matchers: {
-                color: /(background|color)$/i,
-                date: /Date$/,
-            },
-        },
-        docs: {
-            container: (context: any) => {
-                const isDark = useDarkMode();
-
-                const props = {
-                    ...context,
-                    theme: isDark ? Dark : Light,
-                };
-
-                useEffect(() => {
-                    injectTheme(!isDark ? LightTheme : DarkTheme);
-                }, [isDark]);
-
-                return createElement(DocsContainer, props);
-            },
-        },
-        options: {
-            storySort: {
-                order: [
-                    'Welcome',
-                    'Tokens',
-                    'Inputs',
-                    'Content',
-                    'Uncategorized'
-                ],
-            }
-        },
-        darkMode: {
-            stylePreview: true,
-            // Override the default dark theme
-            dark: Dark,
-            // Override the default light theme
-            light: Light
-        }
-    },
-};
-
-export default preview;

package/.storybook/themes.ts

@@ -1,30 +0,0 @@
-import { create, ThemeVars } from '@storybook/theming';
-import { LightTheme, DarkTheme, pvar } from '../src/stories/theme';
-
-/**
- * Shared theme variables across light and dark themes.
- */
-const sharedConfig: Partial<ThemeVars> = {
-    brandTitle: 'Paris',
-    brandUrl: 'https://slingshot.fm',
-    brandTarget: '_blank',
-    colorSecondary: '#FB46BE',
-    fontBase: '"Graphik Web", sans-serif',
-    fontCode: '"Fira Code VF", monospace',
-    inputBorderRadius: 0,
-};
-
-export const Light = create({
-    ...sharedConfig,
-    base: 'light',
-    brandImage: 'https://fast.slingshot.fm/sling/logo/paris-sb.png',
-    appBg: LightTheme.colors.backgroundPrimary,
-});
-
-export const Dark = create({
-    ...sharedConfig,
-    base: 'dark',
-    brandImage: 'https://fast.slingshot.fm/sling/logo/paris-sb-white.png',
-    appBg: DarkTheme.colors.backgroundPrimary,
-    appContentBg: DarkTheme.colors.backgroundPrimary,
-});

package/cat

@@ -1,2 +0,0 @@
-/Users/sanil/Projects/Slingshot/paris/node_modules/.bin/pte
-/Users/sanil/Projects/Slingshot/paris/node_modules/.bin/pte

package/global.d.ts

@@ -1,2 +0,0 @@
-declare module '*.module.css';
-declare module '*.module.scss';

package/next.config.js

@@ -1,6 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-    reactStrictMode: true,
-};
-
-module.exports = nextConfig;

package/public/fira/fira_code.css

@@ -1,48 +0,0 @@
-@font-face {
-    font-family: 'Fira Code';
-    src: url('woff2/FiraCode-Light.woff2') format('woff2'),
-    url("woff/FiraCode-Light.woff") format("woff");
-    font-weight: 300;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Fira Code';
-    src: url('woff2/FiraCode-Regular.woff2') format('woff2'),
-    url("woff/FiraCode-Regular.woff") format("woff");
-    font-weight: 400;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Fira Code';
-    src: url('woff2/FiraCode-Medium.woff2') format('woff2'),
-    url("woff/FiraCode-Medium.woff") format("woff");
-    font-weight: 500;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Fira Code';
-    src: url('woff2/FiraCode-SemiBold.woff2') format('woff2'),
-    url("woff/FiraCode-SemiBold.woff") format("woff");
-    font-weight: 600;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Fira Code';
-    src: url('woff2/FiraCode-Bold.woff2') format('woff2'),
-    url("woff/FiraCode-Bold.woff") format("woff");
-    font-weight: 700;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Fira Code VF';
-    src: url('woff2/FiraCode-VF.woff2') format('woff2-variations'),
-    url('woff/FiraCode-VF.woff') format('woff-variations');
-    /* font-weight requires a range: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide#Using_a_variable_font_font-face_changes */
-    font-weight: 300 700;
-    font-style: normal;
-}