paris 0.0.1 → 0.2.0

package/src/stories/theme/themes.ts

@@ -0,0 +1,409 @@
+import { createTheme } from 'pte';
+import type { CSSColor, CSSLength } from '@ssh/csstypes';
+import type { Property } from 'csstype';
+import type { PartialDeep } from 'type-fest';
+import { Tokens as T } from './tokens';
+import type { TokensT } from './tokens';
+
+export type FontDefinition = {
+    fontSize: CSSLength,
+    fontWeight: number | 'normal',
+    lineHeight: CSSLength,
+    fontStyle: 'normal' | 'italic',
+    letterSpacing: CSSLength | 'normal',
+    textTransform: Property.TextTransform,
+};
+
+export type FontClassDefinition = Omit<FontDefinition, 'fontSize' | 'lineHeight'>;
+
+export type Theme = {
+    tokens: TokensT,
+    colors: {
+        // Primary
+
+        black: CSSColor,
+        white: CSSColor,
+        accent: CSSColor,
+        negative: CSSColor,
+        warning: CSSColor,
+        positive: CSSColor,
+
+        // Content
+
+        contentPrimary: CSSColor,
+        contentSecondary: CSSColor,
+        contentTertiary: CSSColor,
+        contentDisabled: CSSColor,
+        contentAccent: CSSColor,
+        contentNegative: CSSColor,
+        contentWarning: CSSColor,
+        contentPositive: CSSColor,
+
+        // Content Inverse
+
+        contentInversePrimary: CSSColor,
+        contentInverseSecondary: CSSColor,
+        contentInverseTertiary: CSSColor,
+        contentInverseDisabled: CSSColor,
+
+        // Background
+
+        backgroundSidebar: CSSColor,
+        backgroundPrimary: CSSColor,
+        backgroundSecondary: CSSColor,
+        backgroundTertiary: CSSColor,
+        backgroundAccent: CSSColor,
+        backgroundNegative: CSSColor,
+        backgroundWarning: CSSColor,
+        backgroundPositive: CSSColor,
+
+        // Background Inverse
+
+        backgroundInverseSidebar: CSSColor,
+        backgroundInversePrimary: CSSColor,
+        backgroundInverseSecondary: CSSColor,
+        backgroundInverseTertiary: CSSColor,
+        backgroundInverseNegative: CSSColor,
+        backgroundInversePositive: CSSColor,
+
+        // Background Overlays
+
+        backgroundOverlayLight: CSSColor,
+        backgroundOverlayXLight: CSSColor,
+        backgroundOverlayGrey: CSSColor,
+        backgroundOverlayTeal: CSSColor,
+
+        // Border
+
+        borderOpaque: CSSColor,
+        borderSelected: CSSColor,
+        borderAccent: CSSColor,
+        borderNegative: CSSColor,
+        borderWarning: CSSColor,
+        borderPositive: CSSColor,
+
+        // Border Inverse
+
+        borderInverseOpaque: CSSColor,
+        borderInverseSelected: CSSColor,
+    },
+    typography: {
+        fontFamily: string,
+        boldFontWeight: number,
+        italicLetterSpacing: CSSLength,
+
+        styles: {
+            // Display
+
+            displayLarge: FontDefinition,
+            displayMedium: FontDefinition,
+            displaySmall: FontDefinition,
+
+            // Heading
+
+            headingLarge: FontDefinition,
+            headingMedium: FontDefinition,
+            headingSmall: FontDefinition,
+            headingXSmall: FontDefinition,
+            headingXXSmall: FontDefinition,
+
+            // Label
+
+            labelXLarge: FontDefinition,
+            labelLarge: FontDefinition,
+            labelMedium: FontDefinition,
+            labelSmall: FontDefinition,
+            labelXSmall: FontDefinition,
+
+            // Paragraph
+
+            paragraphLarge: FontDefinition,
+            paragraphMedium: FontDefinition,
+            paragraphSmall: FontDefinition,
+            paragraphXSmall: FontDefinition,
+            paragraphXXSmall: FontDefinition,
+        }
+    },
+    borders: {
+        // Border Radius
+        radius: {
+            pill: CSSLength,
+            circle: CSSLength,
+            rectangle: CSSLength,
+            rounded: CSSLength,
+            roundedSmall: CSSLength,
+            roundedLarge: CSSLength,
+        },
+    },
+    animations: {
+        interaction: string,
+    }
+};
+
+export type ThemeOverrides = PartialDeep<Theme>;
+
+export const DisplayFontClass: FontClassDefinition = {
+    fontStyle: 'normal',
+    letterSpacing: '-0.01em',
+    fontWeight: 600,
+    textTransform: 'none',
+};
+
+export const HeadingFontClass: FontClassDefinition = {
+    fontStyle: 'normal',
+    letterSpacing: 'normal',
+    fontWeight: 600,
+    textTransform: 'none',
+};
+
+export const LabelFontClass: FontClassDefinition = {
+    fontStyle: 'normal',
+    letterSpacing: '0.1em',
+    fontWeight: 600,
+    textTransform: 'uppercase',
+};
+
+export const ParagraphFontClass: FontClassDefinition = {
+    fontStyle: 'normal',
+    letterSpacing: 'normal',
+    fontWeight: 400,
+    textTransform: 'none',
+};
+
+export const LightTheme: Theme = {
+    tokens: T,
+    colors: {
+        // Primary
+
+        black: T.colors.black,
+        white: T.colors.white,
+        accent: T.colors.teal,
+        negative: T.colors.red,
+        warning: T.colors.yellow,
+        positive: T.colors.green,
+
+        // Content
+
+        contentPrimary: T.colors.grey1050,
+        contentSecondary: T.colors.grey600,
+        contentTertiary: T.colors.grey500,
+        contentDisabled: T.colors.grey400,
+        contentAccent: T.colors.teal400,
+        contentNegative: T.colors.red400,
+        contentWarning: T.colors.yellow400,
+        contentPositive: T.colors.green400,
+
+        // Content Inverse
+
+        contentInversePrimary: T.colors.white,
+        contentInverseSecondary: T.colors.grey200,
+        contentInverseTertiary: T.colors.grey400,
+        contentInverseDisabled: T.colors.grey500,
+
+        // Background
+
+        backgroundSidebar: T.colors.black,
+        backgroundPrimary: T.colors.white,
+        backgroundSecondary: T.colors.grey50,
+        backgroundTertiary: T.colors.grey100,
+        backgroundAccent: T.colors.teal100,
+        backgroundNegative: T.colors.red100,
+        backgroundWarning: T.colors.yellow100,
+        backgroundPositive: T.colors.green100,
+
+        // Background Inverse
+
+        backgroundInverseSidebar: T.colors.grey1050,
+        backgroundInversePrimary: T.colors.black,
+        backgroundInverseSecondary: T.colors.grey900,
+        backgroundInverseTertiary: T.colors.grey800,
+        backgroundInverseNegative: T.colors.red700,
+        backgroundInversePositive: T.colors.green700,
+
+        // Background Overlays
+
+        backgroundOverlayLight: 'rgba(255, 255, 255, 0.07)',
+        backgroundOverlayXLight: 'rgba(255, 255, 255, 0.1)',
+        backgroundOverlayGrey: 'rgba(175, 175, 175, 0.8)',
+        backgroundOverlayTeal: 'rgba(29, 238, 205, 0.1)',
+
+        // Border
+
+        borderOpaque: T.colors.grey200,
+        borderSelected: T.colors.grey500,
+        borderAccent: T.colors.teal400,
+        borderNegative: T.colors.red400,
+        borderWarning: T.colors.yellow400,
+        borderPositive: T.colors.green400,
+
+        // Border Inverse
+
+        borderInverseOpaque: T.colors.grey750,
+        borderInverseSelected: T.colors.grey200,
+    },
+    typography: {
+        fontFamily: '"Graphik Web", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif',
+        boldFontWeight: 500,
+        italicLetterSpacing: '-0.01em',
+
+        styles: {
+            // Display
+
+            displayLarge: {
+                ...DisplayFontClass,
+                fontSize: '72px',
+                lineHeight: '86px',
+            },
+            displayMedium: {
+                ...DisplayFontClass,
+                fontSize: '52px',
+                lineHeight: '62px',
+            },
+            displaySmall: {
+                ...DisplayFontClass,
+                fontSize: '34px',
+                lineHeight: '41px',
+            },
+
+            // Heading
+
+            headingLarge: {
+                ...HeadingFontClass,
+                fontSize: '32px',
+                lineHeight: '38px',
+            },
+            headingMedium: {
+                ...HeadingFontClass,
+                fontSize: '28px',
+                lineHeight: '34px',
+            },
+            headingSmall: {
+                ...HeadingFontClass,
+                fontSize: '24px',
+                lineHeight: '29px',
+            },
+            headingXSmall: {
+                ...HeadingFontClass,
+                fontSize: '20px',
+                lineHeight: '24px',
+            },
+            headingXXSmall: {
+                ...HeadingFontClass,
+                fontSize: '18px',
+                lineHeight: '22px',
+            },
+
+            // Label
+
+            labelXLarge: {
+                ...LabelFontClass,
+                fontSize: '18px',
+                lineHeight: '22px',
+            },
+            labelLarge: {
+                ...LabelFontClass,
+                fontSize: '16px',
+                lineHeight: '19px',
+            },
+            labelMedium: {
+                ...LabelFontClass,
+                fontSize: '14px',
+                lineHeight: '17px',
+            },
+            labelSmall: {
+                ...LabelFontClass,
+                fontSize: '12px',
+                lineHeight: '14px',
+            },
+            labelXSmall: {
+                ...LabelFontClass,
+                fontSize: '10px',
+                lineHeight: '12px',
+            },
+
+            // Paragraph
+
+            paragraphLarge: {
+                ...ParagraphFontClass,
+                fontSize: '18px',
+                lineHeight: '150%',
+            },
+            paragraphMedium: {
+                ...ParagraphFontClass,
+                fontSize: '16px',
+                lineHeight: '150%',
+            },
+            paragraphSmall: {
+                ...ParagraphFontClass,
+                fontSize: '14px',
+                lineHeight: '150%',
+            },
+            paragraphXSmall: {
+                ...ParagraphFontClass,
+                fontSize: '12px',
+                lineHeight: '150%',
+            },
+            paragraphXXSmall: {
+                ...ParagraphFontClass,
+                fontSize: '10px',
+                lineHeight: '150%',
+            },
+        },
+    },
+    borders: {
+        radius: {
+            pill: '1000px',
+            circle: '100%',
+            rectangle: '0px',
+            rounded: '8px',
+            roundedSmall: '4px',
+            roundedLarge: '12px',
+        },
+    },
+    animations: {
+        interaction: '0.2s cubic-bezier(0.25, 1, 0.5, 1)',
+    },
+};
+
+export const DarkTheme: Theme = {
+    ...LightTheme,
+    colors: {
+        ...LightTheme.colors,
+
+        // Reverse all inverse colors
+
+        contentPrimary: LightTheme.colors.contentInversePrimary,
+        contentSecondary: LightTheme.colors.contentInverseSecondary,
+        contentTertiary: LightTheme.colors.contentInverseTertiary,
+        contentDisabled: LightTheme.colors.contentInverseDisabled,
+        backgroundSidebar: LightTheme.colors.backgroundInverseSidebar,
+        backgroundPrimary: LightTheme.colors.backgroundInversePrimary,
+        backgroundSecondary: LightTheme.colors.backgroundInverseSecondary,
+        backgroundTertiary: LightTheme.colors.backgroundInverseTertiary,
+        backgroundNegative: LightTheme.colors.backgroundInverseNegative,
+        backgroundPositive: LightTheme.colors.backgroundInversePositive,
+        borderOpaque: LightTheme.colors.borderInverseOpaque,
+        borderSelected: LightTheme.colors.borderInverseSelected,
+        contentInversePrimary: LightTheme.colors.contentPrimary,
+        contentInverseSecondary: LightTheme.colors.contentSecondary,
+        contentInverseTertiary: LightTheme.colors.contentTertiary,
+        contentInverseDisabled: LightTheme.colors.contentDisabled,
+        backgroundInverseSidebar: LightTheme.colors.backgroundSidebar,
+        backgroundInversePrimary: LightTheme.colors.backgroundPrimary,
+        backgroundInverseSecondary: LightTheme.colors.backgroundSecondary,
+        backgroundInverseTertiary: LightTheme.colors.backgroundTertiary,
+        backgroundInverseNegative: LightTheme.colors.backgroundNegative,
+        backgroundInversePositive: LightTheme.colors.backgroundPositive,
+        borderInverseOpaque: LightTheme.colors.borderOpaque,
+        borderInverseSelected: LightTheme.colors.borderSelected,
+    },
+};
+
+export const {
+    theme,
+    pvar,
+    pget,
+    updateTheme,
+    injectTheme,
+    generateThemeInjection,
+} = createTheme(LightTheme);

package/src/stories/theme/tokens.ts

@@ -0,0 +1,68 @@
+export const Colors = {
+    black: '#060606',
+    white: '#ffffff',
+    teal: '#1deecd',
+    orange: '#ff9426',
+    pink: '#fb46be',
+    red: '#fd4d2e',
+    yellow: '#ffc043',
+    green: '#08c94e',
+
+    grey1050: '#121212',
+    grey1000: '#171717',
+    grey950: '#1f1f1f',
+    grey900: '#252525',
+    grey800: '#2e2e2e',
+    grey750: '#3c3c3c',
+    grey700: '#4a4a4a',
+    grey600: '#545454',
+    grey500: '#757575',
+    grey400: '#afafaf',
+    grey300: '#c9c9c9',
+    grey200: '#e2e2e2',
+    grey100: '#eeeeee',
+    grey50: '#f6f6f6',
+
+    teal600: '#18b199',
+    teal500: '#1ad4b6',
+    teal400: '#1deecd',
+    teal300: '#8ef7e6',
+    teal200: '#d9fcf7',
+    teal100: '#ecfefb',
+
+    red700: '#331611',
+    red600: '#541a0f',
+    red500: '#a9331f',
+    red400: '#fd4d2e',
+    red300: '#fea697',
+    red200: '#ffe1dc',
+    red100: '#fff0ee',
+
+    yellow600: '#554016',
+    yellow500: '#aa802d',
+    yellow450: '#eba417',
+    yellow400: '#ffc043',
+    yellow300: '#ffe0a1',
+    yellow200: '#fff5e0',
+    yellow100: '#fff8e8',
+
+    green700: '#063717',
+    green600: '#0a4820',
+    green500: '#148f41',
+    green400: '#08c94e',
+    green300: '#8febb0',
+    green200: '#daf8e5',
+    green100: '#edfcf2',
+
+    gradientTeal: 'linear-gradient(95.14deg, #26EDED 0%, #14EFAC 100%)',
+    gradientOrange: 'linear-gradient(95.14deg, #FF814A 0%, #FFA800 100%)',
+    gradientPink: 'linear-gradient(90deg, #FF4BED 0%, #F7418D 100%)',
+} as const;
+
+export type TokensT = {
+    colors: typeof Colors,
+};
+
+export const Tokens: TokensT = {
+    colors: Colors,
+};