@interlay/theme - npm Package Compare versions

Comparing version 1.0.0-next.1 to 1.0.0-next.2

dist/index.d.ts

@@ -68,2 +68,7 @@ import { StyledObject } from 'styled-components/dist/types';
 
+type BreakPoints$1 = 'xs' | 's' | 'md' | 'lg' | 'xl';
+type ResponsiveProp<T extends number | string | boolean> = T | Partial<{
+    [K in BreakPoints$1]: T;
+}>;
+
 type Spacing = keyof typeof baseSpacing;
@@ -144,4 +149,2 @@ declare const baseSpacing: {
 
-type BreakPoints$1 = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-
 type ColorShade = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
@@ -199,10 +202,19 @@ type PrimaryColors = Record<`primary-${ColorShade}`, string>;
 interface MarginProps {
-    margin?: Spacing;
-    marginTop?: Spacing;
-    marginBottom?: Spacing;
-    marginLeft?: Spacing;
-    marginRight?: Spacing;
-    marginX?: Spacing;
-    marginY?: Spacing;
+    margin?: ResponsiveProp<Spacing>;
+    marginTop?: ResponsiveProp<Spacing>;
+    marginBottom?: ResponsiveProp<Spacing>;
+    marginLeft?: ResponsiveProp<Spacing>;
+    marginRight?: ResponsiveProp<Spacing>;
+    marginX?: ResponsiveProp<Spacing>;
+    marginY?: ResponsiveProp<Spacing>;
 }
+interface PaddingProps {
+    padding?: ResponsiveProp<Spacing>;
+    paddingTop?: ResponsiveProp<Spacing>;
+    paddingBottom?: ResponsiveProp<Spacing>;
+    paddingLeft?: ResponsiveProp<Spacing>;
+    paddingRight?: ResponsiveProp<Spacing>;
+    paddingX?: ResponsiveProp<Spacing>;
+    paddingY?: ResponsiveProp<Spacing>;
+}
 type Orientation = 'horizontal' | 'vertical';
@@ -310,4 +322,4 @@ type Overflow = 'auto' | 'hidden' | 'scroll' | 'visible' | 'inherit';
 declare const bobTheme: {
-    icon: (size: IconsSizes, color?: "light" | "primary-100" | "primary-400" | "primary-500" | "primary-600" | "primary-700" | "primary-900" | "primary-50" | "primary-200" | "primary-300" | "primary-800" | "grey-100" | "grey-400" | "grey-500" | "grey-600" | "grey-700" | "grey-900" | "grey-50" | "grey-200" | "grey-300" | "grey-800" | "blue-100" | "blue-400" | "blue-500" | "blue-600" | "blue-700" | "blue-900" | "blue-50" | "blue-200" | "blue-300" | "blue-800" | "green-100" | "green-400" | "green-500" | "green-600" | "green-700" | "green-900" | "green-50" | "green-200" | "green-300" | "green-800" | "red-100" | "red-400" | "red-500" | "red-600" | "red-700" | "red-900" | "red-50" | "red-200" | "red-300" | "red-800" | "dark" | undefined) => styled_components.RuleSet<object>;
-    color: (color: "light" | "primary-100" | "primary-400" | "primary-500" | "primary-600" | "primary-700" | "primary-900" | "primary-50" | "primary-200" | "primary-300" | "primary-800" | "grey-100" | "grey-400" | "grey-500" | "grey-600" | "grey-700" | "grey-900" | "grey-50" | "grey-200" | "grey-300" | "grey-800" | "blue-100" | "blue-400" | "blue-500" | "blue-600" | "blue-700" | "blue-900" | "blue-50" | "blue-200" | "blue-300" | "blue-800" | "green-100" | "green-400" | "green-500" | "green-600" | "green-700" | "green-900" | "green-50" | "green-200" | "green-300" | "green-800" | "red-100" | "red-400" | "red-500" | "red-600" | "red-700" | "red-900" | "red-50" | "red-200" | "red-300" | "red-800" | "dark" | "inherit") => string;
+    icon: (size: IconsSizes, color?: "light" | "primary-600" | "primary-900" | "primary-100" | "primary-400" | "primary-500" | "primary-700" | "primary-50" | "primary-200" | "primary-300" | "primary-800" | "grey-600" | "grey-900" | "grey-100" | "grey-400" | "grey-500" | "grey-700" | "grey-50" | "grey-200" | "grey-300" | "grey-800" | "blue-600" | "blue-900" | "blue-100" | "blue-400" | "blue-500" | "blue-700" | "blue-50" | "blue-200" | "blue-300" | "blue-800" | "green-600" | "green-900" | "green-100" | "green-400" | "green-500" | "green-700" | "green-50" | "green-200" | "green-300" | "green-800" | "red-600" | "red-900" | "red-100" | "red-400" | "red-500" | "red-700" | "red-50" | "red-200" | "red-300" | "red-800" | "dark" | undefined) => styled_components.RuleSet<object>;
+    color: (color: "light" | "primary-600" | "primary-900" | "primary-100" | "primary-400" | "primary-500" | "primary-700" | "primary-50" | "primary-200" | "primary-300" | "primary-800" | "grey-600" | "grey-900" | "grey-100" | "grey-400" | "grey-500" | "grey-700" | "grey-50" | "grey-200" | "grey-300" | "grey-800" | "blue-600" | "blue-900" | "blue-100" | "blue-400" | "blue-500" | "blue-700" | "blue-50" | "blue-200" | "blue-300" | "blue-800" | "green-600" | "green-900" | "green-100" | "green-400" | "green-500" | "green-700" | "green-50" | "green-200" | "green-300" | "green-800" | "red-600" | "red-900" | "red-100" | "red-400" | "red-500" | "red-700" | "red-50" | "red-200" | "red-300" | "red-800" | "dark" | "inherit") => string;
     accordion: AccordionTheme;
@@ -330,10 +342,7 @@ alert: AlertTheme;
     table: TableTheme;
-    values: Record<BreakPoints$1, number>;
-    up: (key: BreakPoints$1) => string;
-    down: (key: BreakPoints$1) => string;
     fontSize: (key: "s" | "md" | "lg" | "xl" | "2xl" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl", unit?: "rem" | "px", base?: number) => string;
     fontWeight: (key: "normal" | "medium" | "semibold" | "bold") => number;
-    lineHeight: (key: "s" | "md" | "lg" | "xl" | "2xl" | "none" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl", unit?: "rem" | "px", base?: number) => string;
-    rounded: (key: "s" | "md" | "lg" | "xl" | "2xl" | "none" | "xxs" | "xs" | "3xl" | "4xl" | "full") => string;
-    spacing: (key: "s" | "md" | "lg" | "xl" | "2xl" | "none" | "xxs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | "11xl", unit?: "rem" | "px", base?: number) => string;
+    lineHeight: (key: "s" | "md" | "lg" | "xl" | "2xl" | "xs" | "none" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl", unit?: "rem" | "px", base?: number) => string;
+    rounded: (key: "s" | "md" | "lg" | "xl" | "2xl" | "xs" | "none" | "xxs" | "3xl" | "4xl" | "full") => string;
+    spacing: (key: "s" | "md" | "lg" | "xl" | "2xl" | "xs" | "none" | "xxs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | "11xl", unit?: "rem" | "px", base?: number) => string;
     typography: (key: Typography) => styled_components.StyledObject<object>;
@@ -346,2 +355,14 @@ transition: (property: "common" | "colors" | "dimensions" | "position" | "background", duration: "normal" | "ultraFast" | "faster" | "fast" | "slow" | "slower" | "ultraSlow", timingFunction?: "easeIn" | "easeOut" | "easeInOut" | undefined) => {
     maxWidth: (key: MaxWidth, unit?: "rem" | "px", base?: number) => string;
+    breakpoints: {
+        values: Record<BreakPoints$1, number>;
+        up: (key: BreakPoints$1) => string;
+        down: (key: BreakPoints$1) => string;
+        media: {
+            xs: (...args: any[]) => styled_components.RuleSet<object>;
+            s: (...args: any[]) => styled_components.RuleSet<object>;
+            md: (...args: any[]) => styled_components.RuleSet<object>;
+            lg: (...args: any[]) => styled_components.RuleSet<object>;
+            xl: (...args: any[]) => styled_components.RuleSet<object>;
+        };
+    };
 };
@@ -370,4 +391,4 @@
 declare const defineTheme: ({ colors, ...theme }: ThemeParams) => {
-    icon: (size: IconsSizes, color?: "light" | "primary-100" | "primary-400" | "primary-500" | "primary-600" | "primary-700" | "primary-900" | "primary-50" | "primary-200" | "primary-300" | "primary-800" | "grey-100" | "grey-400" | "grey-500" | "grey-600" | "grey-700" | "grey-900" | "grey-50" | "grey-200" | "grey-300" | "grey-800" | "blue-100" | "blue-400" | "blue-500" | "blue-600" | "blue-700" | "blue-900" | "blue-50" | "blue-200" | "blue-300" | "blue-800" | "green-100" | "green-400" | "green-500" | "green-600" | "green-700" | "green-900" | "green-50" | "green-200" | "green-300" | "green-800" | "red-100" | "red-400" | "red-500" | "red-600" | "red-700" | "red-900" | "red-50" | "red-200" | "red-300" | "red-800" | "dark" | undefined) => styled_components.RuleSet<object>;
-    color: (color: "light" | "primary-100" | "primary-400" | "primary-500" | "primary-600" | "primary-700" | "primary-900" | "primary-50" | "primary-200" | "primary-300" | "primary-800" | "grey-100" | "grey-400" | "grey-500" | "grey-600" | "grey-700" | "grey-900" | "grey-50" | "grey-200" | "grey-300" | "grey-800" | "blue-100" | "blue-400" | "blue-500" | "blue-600" | "blue-700" | "blue-900" | "blue-50" | "blue-200" | "blue-300" | "blue-800" | "green-100" | "green-400" | "green-500" | "green-600" | "green-700" | "green-900" | "green-50" | "green-200" | "green-300" | "green-800" | "red-100" | "red-400" | "red-500" | "red-600" | "red-700" | "red-900" | "red-50" | "red-200" | "red-300" | "red-800" | "dark" | "inherit") => string;
+    icon: (size: IconsSizes, color?: "light" | "primary-600" | "primary-900" | "primary-100" | "primary-400" | "primary-500" | "primary-700" | "primary-50" | "primary-200" | "primary-300" | "primary-800" | "grey-600" | "grey-900" | "grey-100" | "grey-400" | "grey-500" | "grey-700" | "grey-50" | "grey-200" | "grey-300" | "grey-800" | "blue-600" | "blue-900" | "blue-100" | "blue-400" | "blue-500" | "blue-700" | "blue-50" | "blue-200" | "blue-300" | "blue-800" | "green-600" | "green-900" | "green-100" | "green-400" | "green-500" | "green-700" | "green-50" | "green-200" | "green-300" | "green-800" | "red-600" | "red-900" | "red-100" | "red-400" | "red-500" | "red-700" | "red-50" | "red-200" | "red-300" | "red-800" | "dark" | undefined) => styled_components.RuleSet<object>;
+    color: (color: "light" | "primary-600" | "primary-900" | "primary-100" | "primary-400" | "primary-500" | "primary-700" | "primary-50" | "primary-200" | "primary-300" | "primary-800" | "grey-600" | "grey-900" | "grey-100" | "grey-400" | "grey-500" | "grey-700" | "grey-50" | "grey-200" | "grey-300" | "grey-800" | "blue-600" | "blue-900" | "blue-100" | "blue-400" | "blue-500" | "blue-700" | "blue-50" | "blue-200" | "blue-300" | "blue-800" | "green-600" | "green-900" | "green-100" | "green-400" | "green-500" | "green-700" | "green-50" | "green-200" | "green-300" | "green-800" | "red-600" | "red-900" | "red-100" | "red-400" | "red-500" | "red-700" | "red-50" | "red-200" | "red-300" | "red-800" | "dark" | "inherit") => string;
     accordion: AccordionTheme;
@@ -390,10 +411,7 @@ alert: AlertTheme;
     table: TableTheme;
-    values: Record<BreakPoints$1, number>;
-    up: (key: BreakPoints$1) => string;
-    down: (key: BreakPoints$1) => string;
     fontSize: (key: "s" | "md" | "lg" | "xl" | "2xl" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl", unit?: "rem" | "px", base?: number) => string;
     fontWeight: (key: "normal" | "medium" | "semibold" | "bold") => number;
-    lineHeight: (key: "s" | "md" | "lg" | "xl" | "2xl" | "none" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl", unit?: "rem" | "px", base?: number) => string;
-    rounded: (key: "s" | "md" | "lg" | "xl" | "2xl" | "none" | "xxs" | "xs" | "3xl" | "4xl" | "full") => string;
-    spacing: (key: "s" | "md" | "lg" | "xl" | "2xl" | "none" | "xxs" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | "11xl", unit?: "rem" | "px", base?: number) => string;
+    lineHeight: (key: "s" | "md" | "lg" | "xl" | "2xl" | "xs" | "none" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl", unit?: "rem" | "px", base?: number) => string;
+    rounded: (key: "s" | "md" | "lg" | "xl" | "2xl" | "xs" | "none" | "xxs" | "3xl" | "4xl" | "full") => string;
+    spacing: (key: "s" | "md" | "lg" | "xl" | "2xl" | "xs" | "none" | "xxs" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | "11xl", unit?: "rem" | "px", base?: number) => string;
     typography: (key: Typography) => styled_components.StyledObject<object>;
@@ -406,2 +424,14 @@ transition: (property: "common" | "colors" | "dimensions" | "position" | "background", duration: "normal" | "ultraFast" | "faster" | "fast" | "slow" | "slower" | "ultraSlow", timingFunction?: "easeIn" | "easeOut" | "easeInOut" | undefined) => {
     maxWidth: (key: MaxWidth, unit?: "rem" | "px", base?: number) => string;
+    breakpoints: {
+        values: Record<BreakPoints$1, number>;
+        up: (key: BreakPoints$1) => string;
+        down: (key: BreakPoints$1) => string;
+        media: {
+            xs: (...args: any[]) => styled_components.RuleSet<object>;
+            s: (...args: any[]) => styled_components.RuleSet<object>;
+            md: (...args: any[]) => styled_components.RuleSet<object>;
+            lg: (...args: any[]) => styled_components.RuleSet<object>;
+            xl: (...args: any[]) => styled_components.RuleSet<object>;
+        };
+    };
 };
@@ -411,5 +441,2 @@ type Theme = ReturnType<typeof defineTheme>;
 type BreakPoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-type ResponsiveProp<T extends number | string> = T | Partial<{
-    [K in BreakPoints]: T;
-}>;
 declare const breakpoints: {
@@ -1044,2 +1071,2 @@ values: Record<BreakPoints, number>;
 
-export { type AccordionVariants, type AlertStatus, type AlignItems, type AlignSelf, type BreakPoints$1 as BreakPoints, type ButtonColors, type ButtonSizes, type ButtonVariants, type CTASizes, type CTAVariants, type Color, type ComponentLibraryTheme, type DialogSize, type Direction, type DividerSizes, type FontSize, type FontWeight, type IconsSizes, type InputSizes, type JustifyContent, type LabelPosition, type LineHeight, type MarginProps, type MaxWidth, type MeterVariants, type NormalAlignments, type Orientation, type Overflow, type Placement, type ProgressBarSize, type ResponsiveProp, type Rounded, type Spacing, type SpinnerColors, type SpinnerSizes, type Status, type TabsSize, type Theme, type TokenInputSize, type TransitionDuration, type TransitionProperty, type TransitionTimingFunction, type Typography, type Variants, type Wrap, bobTheme, breakpoints, base as theme };
+export { type AccordionVariants, type AlertStatus, type AlignItems, type AlignSelf, type BreakPoints$1 as BreakPoints, type ButtonColors, type ButtonSizes, type ButtonVariants, type CTASizes, type CTAVariants, type Color, type ComponentLibraryTheme, type DialogSize, type Direction, type DividerSizes, type FontSize, type FontWeight, type IconsSizes, type InputSizes, type JustifyContent, type LabelPosition, type LineHeight, type MarginProps, type MaxWidth, type MeterVariants, type NormalAlignments, type Orientation, type Overflow, type PaddingProps, type Placement, type ProgressBarSize, type ResponsiveProp, type Rounded, type Spacing, type SpinnerColors, type SpinnerSizes, type Status, type TabsSize, type Theme, type TokenInputSize, type TransitionDuration, type TransitionProperty, type TransitionTimingFunction, type Typography, type Variants, type Wrap, bobTheme, breakpoints, base as theme };

dist/index.js

@@ -105,6 +105,7 @@ "use client";
 // src/core/breakpoints.ts
+var import_styled_components = require("styled-components");
 var values = {
   xs: 0,
   // phone
-  sm: 600,
+  s: 600,
   // tablet
@@ -121,3 +122,30 @@ md: 900,
   up: (key) => `(min-width:${values[key]}px)`,
-  down: (key) => `(max-width:${values[key]}px)`
+  down: (key) => `(max-width:${values[key]}px)`,
+  media: {
+    xs: (...args) => import_styled_components.css`
+      @media (min-width: ${values.xs}px) {
+        ${(0, import_styled_components.css)(...args)};
+      }
+    `,
+    s: (...args) => import_styled_components.css`
+      @media (min-width: ${values.s}px) {
+        ${(0, import_styled_components.css)(...args)};
+      }
+    `,
+    md: (...args) => import_styled_components.css`
+      @media (min-width: ${values.md}px) {
+        ${(0, import_styled_components.css)(...args)};
+      }
+    `,
+    lg: (...args) => import_styled_components.css`
+      @media (min-width: ${values.lg}px) {
+        ${(0, import_styled_components.css)(...args)};
+      }
+    `,
+    xl: (...args) => import_styled_components.css`
+      @media (min-width: ${values.xl}px) {
+        ${(0, import_styled_components.css)(...args)};
+      }
+    `
+  }
 };
@@ -206,3 +234,3 @@
 // src/core/icon.ts
-var import_styled_components = require("styled-components");
+var import_styled_components2 = require("styled-components");
 
@@ -268,3 +296,3 @@ // src/core/space.ts
   const getColor = color(colors2);
-  return (size, color3) => import_styled_components.css`
+  return (size, color3) => import_styled_components2.css`
     ${iconSizeBase[size]}
@@ -301,3 +329,3 @@ color: ${color3 && getColor(color3)};
   maxWidth,
-  ...breakpoints
+  breakpoints
 };
@@ -304,0 +332,0 @@ var defineTheme = ({ colors: colors2, ...theme }) => ({

package.json

 {
   "name": "@interlay/theme",
-  "version": "1.0.0-next.1",
+  "version": "1.0.0-next.2",
   "description": "The default theme for Interlay UI components",
@@ -5,0 +5,0 @@ "homepage": "https://github.com/interlay/ui#readme",

No alert changes

Improved metrics

Total package byte prevSize

162561

increased by2.59%

Lines of code

4858

increased by1.74%

No dependency changes