@papyrus-ui/styles 0.1.0

package/dist/types/styles/global.css.d.ts

@@ -0,0 +1,165 @@
+/**
+ * Document
+ * ========
+ */
+/**
+ * Define variables
+ */
+export declare const vars: {
+    boxShadow: {
+        focusDanger: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        focusSuccess: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        inset: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        focus: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        md: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        sm: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        lg: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    fontFamily: {
+        secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    borderRadius: {
+        xs: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        sm: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        md: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        lg: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xl: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        '2xl': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        '3xl': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        full: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    color: {
+        light500: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        light300: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        light100: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        accent800: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        success200: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        neutral700: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        accent600: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        neutral900: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        accent400: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        success800: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        neutral100: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        dark200: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        neutral500: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        dark400: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        white: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        success400: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        success600: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        neutral300: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        light50: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        dark50: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        primary50: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        dark700: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        primary100: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        danger200: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        dark900: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        primary300: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        accent300: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        danger400: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        primary500: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        accent100: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        danger600: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        warning800: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        primary700: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        danger800: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        warning600: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        primary900: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        warning400: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        warning200: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        success50: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        danger50: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        light900: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        light700: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        light400: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        light200: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        accent900: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        success100: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        accent700: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        neutral800: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        accent500: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        success700: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        neutral200: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        dark300: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        neutral400: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        success900: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        dark500: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        neutral600: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        success300: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        success500: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        dark100: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        accent50: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        black: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        dark600: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        warning50: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        danger100: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        dark800: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        primary200: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        accent200: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        danger300: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        warning900: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        primary400: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        danger500: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        warning700: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        primary600: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        danger700: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        warning500: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        primary800: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        danger900: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        warning300: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        warning100: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        light800: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        neutral50: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        light600: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    letterSpacing: {
+        normal: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        wider: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        widest: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        wide: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        tighter: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        tight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    fontSize: {
+        xl: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        '2xl': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        md: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        '3xl': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        '4xl': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        '5xl': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        sm: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        '6xl': `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xs: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        lg: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    lineHeight: {
+        relaxed: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        normal: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        snug: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        loose: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        tight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    gradient: {
+        highlight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        highlightAlt: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        skeleton: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        skeletonAlt: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    fontWeight: {
+        extraLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        light: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        semiBold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        black: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        bold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        extraBold: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        regular: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        thin: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    transition: {
+        fade: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        collapse: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        base: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+};

package/dist/types/styles/themes.css.d.ts

@@ -0,0 +1 @@
+export declare const lightTheme: string;

package/dist/types/styles/utility.css.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Typography
+ * ==========
+ */
+export declare const breakWordStyle: string;
+export declare const truncateStyle: string;
+export declare const highlightStyle: string;
+/**
+ * Transitions
+ * ===========
+ */
+export declare const fadeStyle: string;
+export declare const fadeInStyle: string;
+export declare const collapseStyle: string;
+export declare const collapseInStyle: string;
+/**
+ * Miscellaneous
+ * =============
+ */
+export declare const interactiveStyle: string;
+export declare const hideScrollbarStyle: string;
+export declare const hideVisuallyStyle: string;

package/dist/types/types/index.d.ts

@@ -0,0 +1 @@
+export * from './theme';

package/dist/types/types/theme.d.ts

@@ -0,0 +1,158 @@
+export declare type Theme = {
+    boxShadow: {
+        focusDanger: string;
+        focusSuccess: string;
+        inset: string;
+        focus: string;
+        md: string;
+        sm: string;
+        lg: string;
+    };
+    fontFamily: {
+        secondary: string;
+        primary: string;
+    };
+    borderRadius: {
+        'xs': string;
+        'sm': string;
+        'md': string;
+        'lg': string;
+        'xl': string;
+        '2xl': string;
+        '3xl': string;
+        'full': string;
+    };
+    color: {
+        light500: string;
+        light300: string;
+        light100: string;
+        accent800: string;
+        success200: string;
+        neutral700: string;
+        accent600: string;
+        neutral900: string;
+        accent400: string;
+        success800: string;
+        neutral100: string;
+        dark200: string;
+        neutral500: string;
+        dark400: string;
+        white: string;
+        success400: string;
+        success600: string;
+        neutral300: string;
+        light50: string;
+        dark50: string;
+        primary50: string;
+        dark700: string;
+        primary100: string;
+        danger200: string;
+        dark900: string;
+        primary300: string;
+        accent300: string;
+        danger400: string;
+        primary500: string;
+        accent100: string;
+        danger600: string;
+        warning800: string;
+        primary700: string;
+        danger800: string;
+        warning600: string;
+        primary900: string;
+        warning400: string;
+        warning200: string;
+        success50: string;
+        danger50: string;
+        light900: string;
+        light700: string;
+        light400: string;
+        light200: string;
+        accent900: string;
+        success100: string;
+        accent700: string;
+        neutral800: string;
+        accent500: string;
+        success700: string;
+        neutral200: string;
+        dark300: string;
+        neutral400: string;
+        success900: string;
+        dark500: string;
+        neutral600: string;
+        success300: string;
+        success500: string;
+        dark100: string;
+        accent50: string;
+        black: string;
+        dark600: string;
+        warning50: string;
+        danger100: string;
+        dark800: string;
+        primary200: string;
+        accent200: string;
+        danger300: string;
+        warning900: string;
+        primary400: string;
+        danger500: string;
+        warning700: string;
+        primary600: string;
+        danger700: string;
+        warning500: string;
+        primary800: string;
+        danger900: string;
+        warning300: string;
+        warning100: string;
+        light800: string;
+        neutral50: string;
+        light600: string;
+    };
+    letterSpacing: {
+        normal: string;
+        wider: string;
+        widest: string;
+        wide: string;
+        tighter: string;
+        tight: string;
+    };
+    fontSize: {
+        'xl': string;
+        '2xl': string;
+        'md': string;
+        '3xl': string;
+        '4xl': string;
+        '5xl': string;
+        'sm': string;
+        '6xl': string;
+        'xs': string;
+        'lg': string;
+    };
+    lineHeight: {
+        relaxed: string;
+        normal: string;
+        snug: string;
+        loose: string;
+        tight: string;
+    };
+    gradient: {
+        highlight: string;
+        highlightAlt: string;
+        skeleton: string;
+        skeletonAlt: string;
+    };
+    fontWeight: {
+        extraLight: string;
+        light: string;
+        semiBold: string;
+        black: string;
+        medium: string;
+        bold: string;
+        extraBold: string;
+        regular: string;
+        thin: string;
+    };
+    transition: {
+        fade: string;
+        collapse: string;
+        base: string;
+    };
+};

package/dist/types/utils/bp.d.ts

@@ -0,0 +1,7 @@
+import { StyleRule } from '@vanilla-extract/css';
+import { BREAKPOINT } from '../const';
+export declare type Breakpoint = keyof typeof BREAKPOINT;
+export declare function bpUp(name: Breakpoint, content: StyleRule): StyleRule;
+export declare function bpDown(name: Breakpoint, content: StyleRule): StyleRule;
+export declare function bpBetween(min: Breakpoint, max: Breakpoint, content: StyleRule): StyleRule;
+export declare function bpOnly(name: Breakpoint, content: StyleRule): StyleRule;

package/dist/types/utils/partition-atoms.d.ts

@@ -0,0 +1,3 @@
+import { Atoms } from '../styles/atoms.css';
+import { PartitionObject } from './partition-object';
+export declare function partitionAtoms<T>(source: T): PartitionObject<T, Atoms>;

package/dist/types/utils/partition-object.d.ts

@@ -0,0 +1,5 @@
+export declare type PartitionObject<Source, Included> = [
+    Partial<Included>,
+    Omit<Source, keyof Included>
+];
+export declare function partitionObject<Source, Included>(obj: Source, filterFn: (value: Source[keyof Source], key: keyof Source) => boolean): PartitionObject<Source, Included>;