@autoguru/overdrive 4.43.6-next.0 → 4.43.6-next.10

package/dist/styles/sprinkles.css.js

@@ -19,20 +19,22 @@ const {
   } = space,
   spaceWithoutNone = _objectWithoutProperties(space, ["none"]);
 const flexAlignments = {
-  flexEnd: 'flex-end',
-  'flex-end': 'flex-end',
-  flexStart: 'flex-start',
-  'flex-start': 'flex-start',
   center: 'center',
   centre: 'center',
+  end: 'end',
+  flexEnd: 'end',
+  flexStart: 'start',
+  start: 'start',
+  stretch: 'stretch'
+};
+const flexAlignmentsWithSpace = _objectSpread(_objectSpread({}, flexAlignments), {}, {
   spaceAround: 'space-around',
   'space-around': 'space-around',
   spaceBetween: 'space-between',
   'space-between': 'space-between',
   spaceEvenely: 'space-evenly',
-  'space-evenely': 'space-evenly',
-  stretch: 'stretch'
-};
+  'space-evenely': 'space-evenly'
+});
 const fontSizes = Object.entries(tokens.typography.size).reduce((sizes, _ref) => {
   let [scale, fontSize] = _ref;
   sizes[scale] = fontSize.fontSize;
@@ -64,13 +66,63 @@ const intentBorderColours = Object.entries(tokens.colours.intent).reduce((acc, _
   acc[intent] = border;
   return acc;
 }, {});
+const backgroundColours = _objectSpread(_objectSpread(_objectSpread({}, intentBackgroundColoursStandard), tokens.colours.gamut), {}, {
+  transparent: 'transparent'
+});
 const borderColors = _objectSpread({
   default: tokens.color.interactive.border,
   muted: tokens.color.interactive.borderMuted,
   disabled: tokens.color.interactive.borderDisabled
 }, tokens.color.surface);
-const gapSizesWithVar = Object.entries(space).reduce((acc, _ref6) => {
+const borderColours = _objectSpread(_objectSpread({}, tokens.border.colours), intentBorderColours);
+const colours = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, tokens.colours.foreground), tokens.typography.colour), intentForegroundColours), {}, {
+  unset: 'unset',
+  white: tokens.colours.gamut.white
+});
+const mappedBackgroundColours = Object.entries(backgroundColours).reduce((acc, _ref6) => {
   let [key, value] = _ref6;
+  acc[key] = {
+    backgroundColor: value
+  };
+  return acc;
+}, {});
+const mappedBorderBottomColours = Object.entries(borderColours).reduce((acc, _ref7) => {
+  let [key, value] = _ref7;
+  acc[key] = {
+    borderBottomColor: value
+  };
+  return acc;
+}, {});
+const mappedBorderLeftColours = Object.entries(borderColours).reduce((acc, _ref8) => {
+  let [key, value] = _ref8;
+  acc[key] = {
+    borderLeftColor: value
+  };
+  return acc;
+}, {});
+const mappedBorderRightColours = Object.entries(borderColours).reduce((acc, _ref9) => {
+  let [key, value] = _ref9;
+  acc[key] = {
+    borderRightColor: value
+  };
+  return acc;
+}, {});
+const mappedBorderTopColours = Object.entries(borderColours).reduce((acc, _ref0) => {
+  let [key, value] = _ref0;
+  acc[key] = {
+    borderTopColor: value
+  };
+  return acc;
+}, {});
+const mappedColours = Object.entries(colours).reduce((acc, _ref1) => {
+  let [key, value] = _ref1;
+  acc[key] = {
+    color: value
+  };
+  return acc;
+}, {});
+const gapSizesWithVar = Object.entries(space).reduce((acc, _ref10) => {
+  let [key, value] = _ref10;
   acc[key] = {
     vars: {
       [gapVar]: value
@@ -95,14 +147,20 @@ const baseProperties = defineProperties({
     borderLeftColor: borderColors,
     borderRightColor: borderColors,
     borderTopColor: borderColors,
+    borderBottomColour: mappedBorderBottomColours,
+    borderLeftColour: mappedBorderLeftColours,
+    borderRightColour: mappedBorderRightColours,
+    borderTopColour: mappedBorderTopColours,
     borderLeftStyle: ['none', 'solid'],
     borderBottomStyle: ['none', 'solid'],
     borderRightStyle: ['none', 'solid'],
     borderTopStyle: ['none', 'solid'],
     color: tokens.color.content,
+    colour: mappedColours,
     backgroundColor: _objectSpread(_objectSpread({}, tokens.color.surface), {}, {
       transparent: 'transparent'
     }),
+    backgroundColour: mappedBackgroundColours,
     opacity: [0, '1', '0'],
     fontSize: fontSizes,
     lineHeight: lineHeights,
@@ -122,42 +180,18 @@ const baseProperties = defineProperties({
     bg: ['backgroundColor'],
     fg: ['color'],
     borderColor: ['borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor'],
-    borderStyle: ['borderBottomStyle', 'borderLeftStyle', 'borderRightStyle', 'borderTopStyle']
-  }
-});
-const borderColours = _objectSpread(_objectSpread({}, tokens.border.colours), intentBorderColours);
-const legacyColourProperties = defineProperties({
-  '@layer': cssLayerUtil,
-  properties: {
-    backgroundColor: _objectSpread(_objectSpread(_objectSpread({}, intentBackgroundColoursStandard), tokens.colours.gamut), {}, {
-      transparent: 'transparent'
-    }),
-    borderBottomColor: borderColours,
-    borderLeftColor: borderColours,
-    borderRightColor: borderColours,
-    borderTopColor: borderColours,
-    color: _objectSpread(_objectSpread(_objectSpread({}, tokens.colours.foreground), tokens.typography.colour), {}, {
-      unset: 'unset',
-      white: tokens.colours.gamut.white
-    })
-  },
-  shorthands: {
-    backgroundColour: ['backgroundColor'],
-    borderColour: ['borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor'],
-    borderColourX: ['borderLeftColor', 'borderRightColor'],
-    borderColourY: ['borderBottomColor', 'borderTopColor'],
-    borderBottomColour: ['borderBottomColor'],
-    borderLeftColour: ['borderLeftColor'],
-    borderRightColour: ['borderRightColor'],
-    borderTopColour: ['borderTopColor'],
-    borderColourBottom: ['borderBottomColor'],
-    borderColourLeft: ['borderLeftColor'],
-    borderColourRight: ['borderRightColor'],
-    borderColourTop: ['borderTopColor'],
-    colour: ['color']
+    borderColorX: ['borderLeftColor', 'borderRightColor'],
+    borderColorY: ['borderBottomColor', 'borderTopColor'],
+    borderColour: ['borderBottomColour', 'borderLeftColour', 'borderRightColour', 'borderTopColour'],
+    borderColourX: ['borderLeftColour', 'borderRightColour'],
+    borderColourY: ['borderBottomColour', 'borderTopColour'],
+    borderStyle: ['borderBottomStyle', 'borderLeftStyle', 'borderRightStyle', 'borderTopStyle'],
+    borderStyleBottom: ['borderBottomStyle'],
+    borderStyleLeft: ['borderLeftStyle'],
+    borderStyleRight: ['borderRightStyle'],
+    borderStyleTop: ['borderTopStyle']
   }
 });
-export const sprinklesLegacyColours = createSprinkles(legacyColourProperties);
 const legacyTextProperties = defineProperties({
   '@layer': cssLayerUtil,
   properties: {
@@ -204,7 +238,12 @@ const responsiveProperties = defineProperties({
     overflowX: ['auto', 'scroll', 'hidden'],
     overflowY: ['auto', 'scroll', 'hidden'],
     position: ['static', 'relative', 'absolute', 'fixed', 'sticky'],
-    textAlign: ['left', 'center', 'right'],
+    textAlign: {
+      left: 'left',
+      center: 'center',
+      centre: 'center',
+      right: 'right'
+    },
     borderRadius: tokens.border.radius,
     borderLeftWidth: tokens.border.width,
     borderBottomWidth: tokens.border.width,
@@ -232,19 +271,12 @@ const responsiveProperties = defineProperties({
     gap: gapSizesWithVar,
     columnGap: space,
     rowGap: space,
-    alignItems: {
-      flexEnd: 'flex-end',
-      'flex-end': 'flex-end',
-      flexStart: 'flex-start',
-      'flex-start': 'flex-start',
-      center: 'center',
-      baseline: 'baseline',
-      stretch: 'stretch'
-    },
-    justifyContent: flexAlignments,
-    alignContent: flexAlignments,
-    alignSelf: ['flex-start', 'center', 'flex-end', 'stretch'],
-    justifySelf: ['flex-start', 'center', 'flex-end'],
+    alignContent: flexAlignmentsWithSpace,
+    alignItems: _objectSpread(_objectSpread({}, flexAlignments), {}, {
+      baseline: 'baseline'
+    }),
+    alignSelf: flexAlignments,
+    justifyContent: _objectSpread({}, flexAlignmentsWithSpace),
     flexDirection: ['row', 'column', 'row-reverse', 'column-reverse'],
     flexGrow: [0, '0', '1'],
     flexShrink: [0, '0', '1'],

package/dist/utils/index.js

@@ -98,8 +98,8 @@ export const animate = function (element, property, to) {
 };
 export const alignmentToFlexAlignment = align => ({
   center: 'center',
-  left: 'flex-start',
-  right: 'flex-end'
+  left: 'start',
+  right: 'end'
 })[align];
 export const arrayRingLookup = collection => {
   const len = collection.length;

package/dist/utils/sprinkles.d.ts

@@ -1,15 +1,12 @@
-import { type Sprinkles, type SprinklesLegacyColours } from '../styles/sprinkles.css';
-type AnySprinklesKey = keyof Sprinkles | keyof SprinklesLegacyColours;
+import { type Sprinkles } from '../styles/sprinkles.css';
 type RemainingProps<T extends object> = {
-    [K in keyof T as K extends AnySprinklesKey ? never : K]: T[K];
+    [K in keyof T as K extends Sprinkles ? never : K]: T[K];
 };
 interface SortedProps<T extends object> {
     sprinklesProps: Sprinkles;
-    sprinklesLegacyColourProps: SprinklesLegacyColours;
     baseProps: RemainingProps<T>;
 }
 export declare const isSprinklesProperty: (key: string) => boolean;
-export declare const isSprinklesLegacyColourProperty: (key: string) => boolean;
 export declare const filterNonSprinklesProps: <P extends object>(props: P) => RemainingProps<P>;
 export declare const filterPropsWithStyles: <P extends object>(props: P) => SortedProps<P>;
 export {};

package/dist/utils/sprinkles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sprinkles.d.ts","sourceRoot":"","sources":["../../lib/utils/sprinkles.ts"],"names":[],"mappings":"AAAA,OAAO,EAEN,KAAK,SAAS,EAEd,KAAK,sBAAsB,EAC3B,MAAM,yBAAyB,CAAC;AAEjC,KAAK,eAAe,GAAG,MAAM,SAAS,GAAG,MAAM,sBAAsB,CAAC;AAGtE,KAAK,cAAc,CAAC,CAAC,SAAS,MAAM,IAAI;KACtC,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,SAAS,eAAe,GAAG,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAC7D,CAAC;AAEF,UAAU,WAAW,CAAC,CAAC,SAAS,MAAM;IACrC,cAAc,EAAE,SAAS,CAAC;IAC1B,0BAA0B,EAAE,sBAAsB,CAAC;IACnD,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;CAC7B;AAKD,eAAO,MAAM,mBAAmB,GAAI,KAAK,MAAM,YAE9C,CAAC;AAKF,eAAO,MAAM,+BAA+B,GAAI,KAAK,MAAM,YAI1D,CAAC;AAOF,eAAO,MAAM,uBAAuB,GAAI,CAAC,SAAS,MAAM,EAAE,OAAO,CAAC,sBAQtC,CAAC;AAY7B,eAAO,MAAM,qBAAqB,GAAI,CAAC,SAAS,MAAM,EACrD,OAAO,CAAC,KACN,WAAW,CAAC,CAAC,CA2Bf,CAAC"}
+{"version":3,"file":"sprinkles.d.ts","sourceRoot":"","sources":["../../lib/utils/sprinkles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAGpE,KAAK,cAAc,CAAC,CAAC,SAAS,MAAM,IAAI;KACtC,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACvD,CAAC;AAEF,UAAU,WAAW,CAAC,CAAC,SAAS,MAAM;IACrC,cAAc,EAAE,SAAS,CAAC;IAC1B,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;CAC7B;AAKD,eAAO,MAAM,mBAAmB,GAAI,KAAK,MAAM,YAE9C,CAAC;AAQF,eAAO,MAAM,uBAAuB,GAAI,CAAC,SAAS,MAAM,EAAE,OAAO,CAAC,sBAMtC,CAAC;AAW7B,eAAO,MAAM,qBAAqB,GAAI,CAAC,SAAS,MAAM,EACrD,OAAO,CAAC,KACN,WAAW,CAAC,CAAC,CAuBf,CAAC"}

package/dist/utils/sprinkles.js

@@ -1,15 +1,12 @@
 "use strict";
 
-import { sprinkles, sprinklesLegacyColours } from "../styles/sprinkles.css.js";
+import { sprinkles } from "../styles/sprinkles.css.js";
 export const isSprinklesProperty = key => {
   return sprinkles.properties.has(key);
 };
-export const isSprinklesLegacyColourProperty = key => {
-  return sprinklesLegacyColours.properties.has(key);
-};
 export const filterNonSprinklesProps = props => Object.entries(props).reduce((acc, _ref) => {
   let [key, value] = _ref;
-  if (!(isSprinklesProperty(key) || isSprinklesLegacyColourProperty(key))) {
+  if (!isSprinklesProperty(key)) {
     acc[key] = value;
   }
   return acc;
@@ -25,8 +22,6 @@ export const filterPropsWithStyles = props => {
       const value = props[key];
       if (isSprinklesProperty(key)) {
         acc.sprinklesProps[key] = value;
-      } else if (isSprinklesLegacyColourProperty(key)) {
-        acc.sprinklesLegacyColourProps[key] = value;
       } else {
         acc.baseProps[key] = value;
       }
@@ -34,7 +29,6 @@ export const filterPropsWithStyles = props => {
   }
   return {
     sprinklesProps: acc.sprinklesProps,
-    sprinklesLegacyColourProps: acc.sprinklesLegacyColourProps,
     baseProps: acc.baseProps
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@autoguru/overdrive",
-	"version": "4.43.6-next.0",
+	"version": "4.43.6-next.10",
 	"description": "Overdrive is a product component library, and design system for AutoGuru.",
 	"types": "dist/index.d.ts",
 	"main": "dist/index.js",
@@ -20,9 +20,9 @@
 	},
 	"license": "MIT",
 	"sideEffects": [
-		"./lib/**/global.css.*",
+		"./lib/styles/global/*",
 		"./lib/themes/**/*",
-		"./dist/**/global.css.*",
+		"./dist/styles/global/*",
 		"./dist/themes/**/*"
 	],
 	"files": [

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

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=global.css.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"global.css.d.ts","sourceRoot":"","sources":["../../lib/styles/global.css.ts"],"names":[],"mappings":""}

package/dist/styles/global.css.js

@@ -1,71 +0,0 @@
-"use strict";
-
-import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
-__vanilla_filescope__.setFileScope("lib/styles/global.css.ts", "@autoguru/overdrive");
-import { globalFontFace, globalStyle } from '@vanilla-extract/css';
-import { overdriveTokens } from "../themes/theme.css.js";
-import { cssLayerReset } from "./layers.css.js";
-globalFontFace('AvertaStandard', {
-  fontStyle: 'normal',
-  fontWeight: 400,
-  fontDisplay: 'swap',
-  src: `local('Averta Std Regular'), local('AvertaStd-Regular'),url('https://cdn.autoguru.com.au/assets/fonts/avertastd-regular-webfont.woff2') format('woff2'),url('https://cdn.autoguru.com.au/assets/fonts/avertastd-regular-webfont.woff') format('woff')`
-});
-globalFontFace('AvertaStandard', {
-  fontStyle: 'normal',
-  fontWeight: 500,
-  fontDisplay: 'swap',
-  src: `local('Averta Std Semibold'), local('AvertaStd-Semibold'),url('https://cdn.autoguru.com.au/assets/fonts/avertastd-semibold-webfont.woff2') format('woff2'),url('https://cdn.autoguru.com.au/assets/fonts/avertastd-semibold-webfont.woff') format('woff')`
-});
-globalFontFace('AvertaStandard', {
-  fontStyle: 'normal',
-  fontWeight: 700,
-  fontDisplay: 'swap',
-  src: `local('Averta Std Bold'), local('AvertaStd-Bold'),url('https://cdn.autoguru.com.au/assets/fonts/avertastd-bold-webfont.woff2') format('woff2'),url('https://cdn.autoguru.com.au/assets/fonts/avertastd-bold-webfont.woff') format('woff')`
-});
-globalStyle(':where(html)', {
-  '@layer': {
-    [cssLayerReset]: {
-      overflowX: 'hidden'
-    }
-  }
-});
-globalStyle('body', {
-  '@layer': {
-    [cssLayerReset]: {
-      margin: 0,
-      padding: 0,
-      border: 'none'
-    }
-  }
-});
-globalStyle('body, [data-od-base]', {
-  '@layer': {
-    [cssLayerReset]: {
-      fontFamily: overdriveTokens.typography.fontFamily,
-      fontSize: overdriveTokens.typography.size[4].fontSize,
-      fontWeight: overdriveTokens.typography.fontWeight.normal,
-      lineHeight: overdriveTokens.typography.size[4].lineHeight,
-      textRendering: 'optimizeLegibility',
-      textSizeAdjust: 'none',
-      WebkitTapHighlightColor: 'transparent',
-      WebkitTextSizeAdjust: 'none'
-    }
-  }
-});
-globalStyle('*, *::after, *::before', {
-  '@layer': {
-    [cssLayerReset]: {
-      boxSizing: 'border-box'
-    }
-  }
-});
-globalStyle(':where(button, input, select, textarea)', {
-  '@layer': {
-    [cssLayerReset]: {
-      fontFamily: 'inherit',
-      fontSize: 'inherit'
-    }
-  }
-});
-__vanilla_filescope__.endFileScope();