@baseline-ui/tokens 0.14.0 → 0.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.mts CHANGED
@@ -1,5 +1,7 @@
1
1
  import * as _vanilla_extract_sprinkles from '@vanilla-extract/sprinkles';
2
+ import * as _vanilla_extract_css from '@vanilla-extract/css';
2
3
  import { StyleRule } from '@vanilla-extract/css';
4
+ import React from 'react';
3
5
 
4
6
  declare const Layers: {
5
7
  readonly RESET: string;
@@ -150,11 +152,11 @@ declare const createLayerSprinkles: (layer: string) => ((props: {
150
152
  tablet?: "fixed" | "absolute" | "relative" | undefined;
151
153
  desktop?: "fixed" | "absolute" | "relative" | undefined;
152
154
  } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3, "fixed" | "absolute" | "relative" | null>;
153
- display?: ("none" | "flex" | "grid" | "block" | "inline-flex" | {
154
- mobile?: "none" | "flex" | "grid" | "block" | "inline-flex" | undefined;
155
- tablet?: "none" | "flex" | "grid" | "block" | "inline-flex" | undefined;
156
- desktop?: "none" | "flex" | "grid" | "block" | "inline-flex" | undefined;
157
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3, "none" | "flex" | "grid" | "block" | "inline-flex" | null>;
155
+ display?: ("none" | "block" | "flex" | "grid" | "inline-flex" | {
156
+ mobile?: "none" | "block" | "flex" | "grid" | "inline-flex" | undefined;
157
+ tablet?: "none" | "block" | "flex" | "grid" | "inline-flex" | undefined;
158
+ desktop?: "none" | "block" | "flex" | "grid" | "inline-flex" | undefined;
159
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3, "none" | "block" | "flex" | "grid" | "inline-flex" | null>;
158
160
  flexDirection?: ("column" | "column-reverse" | "row" | "row-reverse" | {
159
161
  mobile?: "column" | "column-reverse" | "row" | "row-reverse" | undefined;
160
162
  tablet?: "column" | "column-reverse" | "row" | "row-reverse" | undefined;
@@ -216,7 +218,7 @@ declare const createLayerSprinkles: (layer: string) => ((props: {
216
218
  }) => string) & {
217
219
  properties: Set<"alignItems" | "alignSelf" | "backgroundColor" | "borderEndEndRadius" | "borderEndStartRadius" | "borderStartEndRadius" | "borderStartStartRadius" | "boxShadow" | "color" | "cursor" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "justifyContent" | "justifySelf" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "opacity" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "transitionProperty" | "width" | "border" | "borderColor" | "borderRadius" | "borderStyle" | "borderWidth" | "flex" | "gap" | "inset" | "margin" | "outline" | "padding" | "placeItems" | "transition" | "typography" | "paddingX" | "paddingY" | "marginX" | "marginY" | "borderTopRadius" | "borderBottomRadius" | "borderLeftRadius" | "borderRightRadius">;
218
220
  };
219
- type BaseSprinkles = ReturnType<typeof createLayerSprinkles>;
221
+ declare type BaseSprinkles = ReturnType<typeof createLayerSprinkles>;
220
222
 
221
223
  var elevation$3 = {
222
224
  low: "0 0 4px 0 rgba(0, 0, 0, 0.4)",
@@ -263,13 +265,13 @@ var color$3 = {
263
265
  success: {
264
266
  subtler: "#ecfeda",
265
267
  subtle: "#d4fcac",
266
- medium: "#5d9d1d",
267
- strong: "#345805"
268
+ medium: "#4B8017",
269
+ strong: "#2D4D0E"
268
270
  },
269
271
  warning: {
270
272
  subtler: "#ffecd4",
271
273
  subtle: "#ffd4a1",
272
- medium: "#d46703",
274
+ medium: "#bd5a00",
273
275
  strong: "#9f4c00"
274
276
  },
275
277
  info: {
@@ -571,8 +573,8 @@ var color$2 = {
571
573
  },
572
574
  success: {
573
575
  subtler: "#223a03",
574
- subtle: "#567c06",
575
- medium: "#8cd444",
576
+ subtle: "#3C6612",
577
+ medium: "#80CC34",
576
578
  strong: "#ecfeda"
577
579
  },
578
580
  warning: {
@@ -881,8 +883,8 @@ var color$1 = {
881
883
  success: {
882
884
  subtler: "#ecfeda",
883
885
  subtle: "#d4fcac",
884
- medium: "#5d9d1d",
885
- strong: "#345805"
886
+ medium: "#4B8017",
887
+ strong: "#2D4D0E"
886
888
  },
887
889
  warning: {
888
890
  subtler: "#ffecd4",
@@ -1189,8 +1191,8 @@ var color = {
1189
1191
  },
1190
1192
  success: {
1191
1193
  subtler: "#223a03",
1192
- subtle: "#567c06",
1193
- medium: "#8cd444",
1194
+ subtle: "#3C6612",
1195
+ medium: "#80CC34",
1194
1196
  strong: "#ecfeda"
1195
1197
  },
1196
1198
  warning: {
@@ -2059,45 +2061,14 @@ declare const themeVars: {
2059
2061
  };
2060
2062
  };
2061
2063
  };
2062
- declare const layoutSprinkleValues: {
2063
- readonly dialog: {
2064
- readonly row: {
2065
- readonly padding: {
2066
- readonly vertical: {
2067
- readonly lg: "lg";
2068
- readonly sm: "sm";
2069
- };
2070
- readonly horizontal: {
2071
- readonly lg: "lg";
2072
- readonly sm: "sm";
2073
- };
2074
- };
2075
- };
2076
- };
2077
- };
2078
- declare const layoutValues: {
2079
- readonly dialog: {
2080
- readonly row: {
2081
- readonly height: {
2082
- readonly sm: 40;
2083
- readonly md: 48;
2084
- };
2085
- };
2086
- readonly layout: {
2087
- readonly width: {
2088
- readonly sm: 240;
2089
- };
2090
- };
2091
- };
2092
- };
2093
2064
 
2094
2065
  declare const breakpoints: {
2095
2066
  mobile: number;
2096
2067
  tablet: number;
2097
2068
  desktop: number;
2098
2069
  };
2099
- type Breakpoint = keyof typeof breakpoints;
2100
- type CSSProps = Omit<StyleRule, "@media" | "@supports">;
2070
+ declare type Breakpoint = keyof typeof breakpoints;
2071
+ declare type CSSProps = Omit<StyleRule, "@media" | "@supports">;
2101
2072
  declare const queries: {
2102
2073
  tablet: string;
2103
2074
  desktop: string;
@@ -2257,6 +2228,84 @@ interface Elevation {
2257
2228
  medium: string;
2258
2229
  }
2259
2230
 
2231
+ declare type Join<K, P> = K extends string | number ? P extends string | number ? `${K}.${P}` : never : never;
2232
+ declare type IsObject<T> = T extends object ? T extends any[] ? false : T extends Function ? false : true : false;
2233
+ declare type AllPropertiesArePrimitives<T> = {
2234
+ [K in keyof T]: IsObject<T[K]> extends true ? false : true;
2235
+ }[keyof T];
2236
+ declare type PathsToLeafObject<T, Path extends string = ""> = T extends object ? AllPropertiesArePrimitives<T> extends true ? Path : {
2237
+ [K in keyof T]-?: PathsToLeafObject<T[K], Path extends "" ? K : Join<Path, K>>;
2238
+ }[keyof T] : never;
2239
+
2240
+ declare const layoutSprinkleValues: {
2241
+ readonly dialog: {
2242
+ readonly row: {
2243
+ readonly padding: {
2244
+ readonly vertical: {
2245
+ readonly xs: readonly ["xs", "sm", "sm"];
2246
+ readonly sm: readonly ["sm", "md", "md"];
2247
+ readonly md: readonly ["md", "lg", "lg"];
2248
+ readonly lg: readonly ["lg", "xl", "xl"];
2249
+ readonly xl: readonly ["lg", "2xl", "2xl"];
2250
+ };
2251
+ readonly horizontal: {
2252
+ readonly lg: readonly ["lg", "2xl", "2xl"];
2253
+ readonly md: readonly ["sm", "xl", "xl"];
2254
+ readonly sm: readonly ["sm", "lg", "lg"];
2255
+ };
2256
+ };
2257
+ };
2258
+ };
2259
+ };
2260
+ declare const layoutValues: {
2261
+ readonly dialog: {
2262
+ readonly row: {
2263
+ readonly height: {
2264
+ readonly sm: {
2265
+ readonly mobile: 40;
2266
+ readonly tablet: 48;
2267
+ readonly desktop: 48;
2268
+ };
2269
+ readonly md: {
2270
+ readonly mobile: 48;
2271
+ readonly tablet: 56;
2272
+ readonly desktop: 56;
2273
+ };
2274
+ readonly lg: {
2275
+ readonly mobile: 64;
2276
+ readonly tablet: 72;
2277
+ readonly desktop: 72;
2278
+ };
2279
+ };
2280
+ };
2281
+ readonly layout: {
2282
+ readonly width: {
2283
+ readonly xs: {
2284
+ readonly mobile: 240;
2285
+ readonly tablet: 240;
2286
+ readonly desktop: 240;
2287
+ };
2288
+ readonly sm: {
2289
+ readonly mobile: 240;
2290
+ readonly tablet: 320;
2291
+ readonly desktop: 320;
2292
+ };
2293
+ readonly md: {
2294
+ readonly mobile: 240;
2295
+ readonly tablet: 480;
2296
+ readonly desktop: 480;
2297
+ };
2298
+ readonly lg: {
2299
+ readonly mobile: 240;
2300
+ readonly tablet: 720;
2301
+ readonly desktop: 720;
2302
+ };
2303
+ };
2304
+ };
2305
+ };
2306
+ };
2307
+ declare function getLayoutValue(layout: PathsToLeafObject<typeof layoutValues>, property: keyof React.CSSProperties): _vanilla_extract_css.StyleRule;
2308
+
2260
2309
  interface Sprinkles extends BaseSprinkles {
2261
2310
  base: BaseSprinkles;
2262
2311
  variants: BaseSprinkles;
@@ -2265,4 +2314,4 @@ interface Sprinkles extends BaseSprinkles {
2265
2314
  }
2266
2315
  declare const sprinkles: Sprinkles;
2267
2316
 
2268
- export { type Breakpoint, Layers, type Sprinkles, type Theme, aveDark as aveDarkTheme, aveLight as aveLightTheme, breakpoints, dark as darkTheme, layoutSprinkleValues, layoutValues, light as lightTheme, queries, responsiveStyle, sprinkles, themeContract, themeVars };
2317
+ export { type Breakpoint, Layers, type Sprinkles, type Theme, aveDark as aveDarkTheme, aveLight as aveLightTheme, breakpoints, dark as darkTheme, getLayoutValue, layoutSprinkleValues, light as lightTheme, queries, responsiveStyle, sprinkles, themeContract, themeVars };
package/dist/index.d.ts CHANGED
@@ -1,5 +1,7 @@
1
1
  import * as _vanilla_extract_sprinkles from '@vanilla-extract/sprinkles';
2
+ import * as _vanilla_extract_css from '@vanilla-extract/css';
2
3
  import { StyleRule } from '@vanilla-extract/css';
4
+ import React from 'react';
3
5
 
4
6
  declare const Layers: {
5
7
  readonly RESET: string;
@@ -150,11 +152,11 @@ declare const createLayerSprinkles: (layer: string) => ((props: {
150
152
  tablet?: "fixed" | "absolute" | "relative" | undefined;
151
153
  desktop?: "fixed" | "absolute" | "relative" | undefined;
152
154
  } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3, "fixed" | "absolute" | "relative" | null>;
153
- display?: ("none" | "flex" | "grid" | "block" | "inline-flex" | {
154
- mobile?: "none" | "flex" | "grid" | "block" | "inline-flex" | undefined;
155
- tablet?: "none" | "flex" | "grid" | "block" | "inline-flex" | undefined;
156
- desktop?: "none" | "flex" | "grid" | "block" | "inline-flex" | undefined;
157
- } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3, "none" | "flex" | "grid" | "block" | "inline-flex" | null>;
155
+ display?: ("none" | "block" | "flex" | "grid" | "inline-flex" | {
156
+ mobile?: "none" | "block" | "flex" | "grid" | "inline-flex" | undefined;
157
+ tablet?: "none" | "block" | "flex" | "grid" | "inline-flex" | undefined;
158
+ desktop?: "none" | "block" | "flex" | "grid" | "inline-flex" | undefined;
159
+ } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<1 | 2 | 3, "none" | "block" | "flex" | "grid" | "inline-flex" | null>;
158
160
  flexDirection?: ("column" | "column-reverse" | "row" | "row-reverse" | {
159
161
  mobile?: "column" | "column-reverse" | "row" | "row-reverse" | undefined;
160
162
  tablet?: "column" | "column-reverse" | "row" | "row-reverse" | undefined;
@@ -216,7 +218,7 @@ declare const createLayerSprinkles: (layer: string) => ((props: {
216
218
  }) => string) & {
217
219
  properties: Set<"alignItems" | "alignSelf" | "backgroundColor" | "borderEndEndRadius" | "borderEndStartRadius" | "borderStartEndRadius" | "borderStartStartRadius" | "boxShadow" | "color" | "cursor" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "justifyContent" | "justifySelf" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "opacity" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "transitionProperty" | "width" | "border" | "borderColor" | "borderRadius" | "borderStyle" | "borderWidth" | "flex" | "gap" | "inset" | "margin" | "outline" | "padding" | "placeItems" | "transition" | "typography" | "paddingX" | "paddingY" | "marginX" | "marginY" | "borderTopRadius" | "borderBottomRadius" | "borderLeftRadius" | "borderRightRadius">;
218
220
  };
219
- type BaseSprinkles = ReturnType<typeof createLayerSprinkles>;
221
+ declare type BaseSprinkles = ReturnType<typeof createLayerSprinkles>;
220
222
 
221
223
  var elevation$3 = {
222
224
  low: "0 0 4px 0 rgba(0, 0, 0, 0.4)",
@@ -263,13 +265,13 @@ var color$3 = {
263
265
  success: {
264
266
  subtler: "#ecfeda",
265
267
  subtle: "#d4fcac",
266
- medium: "#5d9d1d",
267
- strong: "#345805"
268
+ medium: "#4B8017",
269
+ strong: "#2D4D0E"
268
270
  },
269
271
  warning: {
270
272
  subtler: "#ffecd4",
271
273
  subtle: "#ffd4a1",
272
- medium: "#d46703",
274
+ medium: "#bd5a00",
273
275
  strong: "#9f4c00"
274
276
  },
275
277
  info: {
@@ -571,8 +573,8 @@ var color$2 = {
571
573
  },
572
574
  success: {
573
575
  subtler: "#223a03",
574
- subtle: "#567c06",
575
- medium: "#8cd444",
576
+ subtle: "#3C6612",
577
+ medium: "#80CC34",
576
578
  strong: "#ecfeda"
577
579
  },
578
580
  warning: {
@@ -881,8 +883,8 @@ var color$1 = {
881
883
  success: {
882
884
  subtler: "#ecfeda",
883
885
  subtle: "#d4fcac",
884
- medium: "#5d9d1d",
885
- strong: "#345805"
886
+ medium: "#4B8017",
887
+ strong: "#2D4D0E"
886
888
  },
887
889
  warning: {
888
890
  subtler: "#ffecd4",
@@ -1189,8 +1191,8 @@ var color = {
1189
1191
  },
1190
1192
  success: {
1191
1193
  subtler: "#223a03",
1192
- subtle: "#567c06",
1193
- medium: "#8cd444",
1194
+ subtle: "#3C6612",
1195
+ medium: "#80CC34",
1194
1196
  strong: "#ecfeda"
1195
1197
  },
1196
1198
  warning: {
@@ -2059,45 +2061,14 @@ declare const themeVars: {
2059
2061
  };
2060
2062
  };
2061
2063
  };
2062
- declare const layoutSprinkleValues: {
2063
- readonly dialog: {
2064
- readonly row: {
2065
- readonly padding: {
2066
- readonly vertical: {
2067
- readonly lg: "lg";
2068
- readonly sm: "sm";
2069
- };
2070
- readonly horizontal: {
2071
- readonly lg: "lg";
2072
- readonly sm: "sm";
2073
- };
2074
- };
2075
- };
2076
- };
2077
- };
2078
- declare const layoutValues: {
2079
- readonly dialog: {
2080
- readonly row: {
2081
- readonly height: {
2082
- readonly sm: 40;
2083
- readonly md: 48;
2084
- };
2085
- };
2086
- readonly layout: {
2087
- readonly width: {
2088
- readonly sm: 240;
2089
- };
2090
- };
2091
- };
2092
- };
2093
2064
 
2094
2065
  declare const breakpoints: {
2095
2066
  mobile: number;
2096
2067
  tablet: number;
2097
2068
  desktop: number;
2098
2069
  };
2099
- type Breakpoint = keyof typeof breakpoints;
2100
- type CSSProps = Omit<StyleRule, "@media" | "@supports">;
2070
+ declare type Breakpoint = keyof typeof breakpoints;
2071
+ declare type CSSProps = Omit<StyleRule, "@media" | "@supports">;
2101
2072
  declare const queries: {
2102
2073
  tablet: string;
2103
2074
  desktop: string;
@@ -2257,6 +2228,84 @@ interface Elevation {
2257
2228
  medium: string;
2258
2229
  }
2259
2230
 
2231
+ declare type Join<K, P> = K extends string | number ? P extends string | number ? `${K}.${P}` : never : never;
2232
+ declare type IsObject<T> = T extends object ? T extends any[] ? false : T extends Function ? false : true : false;
2233
+ declare type AllPropertiesArePrimitives<T> = {
2234
+ [K in keyof T]: IsObject<T[K]> extends true ? false : true;
2235
+ }[keyof T];
2236
+ declare type PathsToLeafObject<T, Path extends string = ""> = T extends object ? AllPropertiesArePrimitives<T> extends true ? Path : {
2237
+ [K in keyof T]-?: PathsToLeafObject<T[K], Path extends "" ? K : Join<Path, K>>;
2238
+ }[keyof T] : never;
2239
+
2240
+ declare const layoutSprinkleValues: {
2241
+ readonly dialog: {
2242
+ readonly row: {
2243
+ readonly padding: {
2244
+ readonly vertical: {
2245
+ readonly xs: readonly ["xs", "sm", "sm"];
2246
+ readonly sm: readonly ["sm", "md", "md"];
2247
+ readonly md: readonly ["md", "lg", "lg"];
2248
+ readonly lg: readonly ["lg", "xl", "xl"];
2249
+ readonly xl: readonly ["lg", "2xl", "2xl"];
2250
+ };
2251
+ readonly horizontal: {
2252
+ readonly lg: readonly ["lg", "2xl", "2xl"];
2253
+ readonly md: readonly ["sm", "xl", "xl"];
2254
+ readonly sm: readonly ["sm", "lg", "lg"];
2255
+ };
2256
+ };
2257
+ };
2258
+ };
2259
+ };
2260
+ declare const layoutValues: {
2261
+ readonly dialog: {
2262
+ readonly row: {
2263
+ readonly height: {
2264
+ readonly sm: {
2265
+ readonly mobile: 40;
2266
+ readonly tablet: 48;
2267
+ readonly desktop: 48;
2268
+ };
2269
+ readonly md: {
2270
+ readonly mobile: 48;
2271
+ readonly tablet: 56;
2272
+ readonly desktop: 56;
2273
+ };
2274
+ readonly lg: {
2275
+ readonly mobile: 64;
2276
+ readonly tablet: 72;
2277
+ readonly desktop: 72;
2278
+ };
2279
+ };
2280
+ };
2281
+ readonly layout: {
2282
+ readonly width: {
2283
+ readonly xs: {
2284
+ readonly mobile: 240;
2285
+ readonly tablet: 240;
2286
+ readonly desktop: 240;
2287
+ };
2288
+ readonly sm: {
2289
+ readonly mobile: 240;
2290
+ readonly tablet: 320;
2291
+ readonly desktop: 320;
2292
+ };
2293
+ readonly md: {
2294
+ readonly mobile: 240;
2295
+ readonly tablet: 480;
2296
+ readonly desktop: 480;
2297
+ };
2298
+ readonly lg: {
2299
+ readonly mobile: 240;
2300
+ readonly tablet: 720;
2301
+ readonly desktop: 720;
2302
+ };
2303
+ };
2304
+ };
2305
+ };
2306
+ };
2307
+ declare function getLayoutValue(layout: PathsToLeafObject<typeof layoutValues>, property: keyof React.CSSProperties): _vanilla_extract_css.StyleRule;
2308
+
2260
2309
  interface Sprinkles extends BaseSprinkles {
2261
2310
  base: BaseSprinkles;
2262
2311
  variants: BaseSprinkles;
@@ -2265,4 +2314,4 @@ interface Sprinkles extends BaseSprinkles {
2265
2314
  }
2266
2315
  declare const sprinkles: Sprinkles;
2267
2316
 
2268
- export { type Breakpoint, Layers, type Sprinkles, type Theme, aveDark as aveDarkTheme, aveLight as aveLightTheme, breakpoints, dark as darkTheme, layoutSprinkleValues, layoutValues, light as lightTheme, queries, responsiveStyle, sprinkles, themeContract, themeVars };
2317
+ export { type Breakpoint, Layers, type Sprinkles, type Theme, aveDark as aveDarkTheme, aveLight as aveLightTheme, breakpoints, dark as darkTheme, getLayoutValue, layoutSprinkleValues, light as lightTheme, queries, responsiveStyle, sprinkles, themeContract, themeVars };