@autoguru/overdrive 4.31.0 → 4.33.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.
Files changed (38) hide show
  1. package/dist/components/Badge/Badge.d.ts.map +1 -1
  2. package/dist/components/Badge/Badge.js +6 -6
  3. package/dist/components/Box/useBoxStyles.css.d.ts +6 -6
  4. package/dist/components/Box/useBoxStyles.css.d.ts.map +1 -1
  5. package/dist/components/Button/Button.css.d.ts +3 -0
  6. package/dist/components/Button/Button.css.d.ts.map +1 -1
  7. package/dist/components/Button/Button.css.js +30 -0
  8. package/dist/components/Button/stories.js +14 -0
  9. package/dist/components/Image/stories.js +4 -2
  10. package/dist/components/NumberInput/NumberInput.d.ts.map +1 -1
  11. package/dist/components/Switch/Switch.css.d.ts +3 -1
  12. package/dist/components/Switch/Switch.css.d.ts.map +1 -1
  13. package/dist/components/Switch/Switch.css.js +44 -16
  14. package/dist/components/Switch/Switch.d.ts +5 -4
  15. package/dist/components/Switch/Switch.d.ts.map +1 -1
  16. package/dist/components/Switch/Switch.js +62 -45
  17. package/dist/components/Switch/stories.js +11 -21
  18. package/dist/components/Text/useTextStyles.css.d.ts +1 -1
  19. package/dist/components/Text/useTextStyles.css.d.ts.map +1 -1
  20. package/dist/components/TextAreaInput/TextAreaInput.d.ts.map +1 -1
  21. package/dist/themes/base/index.d.ts +19 -0
  22. package/dist/themes/base/index.d.ts.map +1 -1
  23. package/dist/themes/base/tokens.d.ts.map +1 -1
  24. package/dist/themes/base/tokens.js +21 -0
  25. package/dist/themes/flat_red/index.d.ts +19 -0
  26. package/dist/themes/flat_red/index.d.ts.map +1 -1
  27. package/dist/themes/flat_red/tokens.d.ts.map +1 -1
  28. package/dist/themes/flat_red/tokens.js +19 -0
  29. package/dist/themes/neutral/index.d.ts +19 -0
  30. package/dist/themes/neutral/index.d.ts.map +1 -1
  31. package/dist/themes/neutral/tokens.d.ts.map +1 -1
  32. package/dist/themes/neutral/tokens.js +70 -49
  33. package/dist/themes/theme.css.d.ts +19 -0
  34. package/dist/themes/theme.css.d.ts.map +1 -1
  35. package/dist/themes/theme.css.js +21 -0
  36. package/dist/themes/tokens.d.ts +3 -2
  37. package/dist/themes/tokens.d.ts.map +1 -1
  38. package/package.json +9 -5
package/dist/components/Badge/Badge.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../lib/components/Badge/Badge.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAkB,MAAM,OAAO,CAAC;AAK1D,OAAO,KAAK,MAAM,MAAM,aAAa,CAAC;AAEtC,MAAM,WAAW,KAAK;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IAC/B,IAAI,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,SAAS,CAAC;CACrC;AAcD,eAAO,MAAM,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAmD1C,CAAC;AAEF,eAAe,KAAK,CAAC"}
1
+ {"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../lib/components/Badge/Badge.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAkB,MAAM,OAAO,CAAC;AAK1D,OAAO,KAAK,MAAM,MAAM,aAAa,CAAC;AAEtC,MAAM,WAAW,KAAK;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IAC/B,IAAI,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,SAAS,CAAC;CACrC;AAoBD,eAAO,MAAM,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAmD1C,CAAC;AAEF,eAAe,KAAK,CAAC"}
package/dist/components/Badge/Badge.js CHANGED
@@ -7,14 +7,14 @@ import { useTextStyles } from "../Text/index.js";
7
7
  import * as styles from "./Badge.css.js";
8
8
  import { jsx as _jsx } from "react/jsx-runtime";
9
9
  const paddingXMap = {
10
- 'small': '1',
11
- 'standard': '1',
12
- 'large': '4'
10
+ small: '1',
11
+ standard: '1',
12
+ large: '4'
13
13
  };
14
14
  const paddingYMap = {
15
- 'small': '1',
16
- 'standard': '1',
17
- 'large': '4'
15
+ small: '1',
16
+ standard: '1',
17
+ large: '4'
18
18
  };
19
19
  export const Badge = _ref => {
20
20
  let {
package/dist/components/Box/useBoxStyles.css.d.ts CHANGED
@@ -14,10 +14,10 @@ export declare const boxShadow: Record<string | number, any>;
14
14
  export declare const border: {
15
15
  style: string;
16
16
  colour: {
17
- top: Record<("primary" | "secondary" | "shine" | "neutral" | "danger" | "warning" | "success" | "information") | "light" | "dark" | "gray", string>;
18
- right: Record<("primary" | "secondary" | "shine" | "neutral" | "danger" | "warning" | "success" | "information") | "light" | "dark" | "gray", string>;
19
- bottom: Record<("primary" | "secondary" | "shine" | "neutral" | "danger" | "warning" | "success" | "information") | "light" | "dark" | "gray", string>;
20
- left: Record<("primary" | "secondary" | "shine" | "neutral" | "danger" | "warning" | "success" | "information") | "light" | "dark" | "gray", string>;
17
+ top: Record<("primary" | "brand" | "secondary" | "shine" | "neutral" | "danger" | "warning" | "success" | "information") | "light" | "dark" | "gray", string>;
18
+ right: Record<("primary" | "brand" | "secondary" | "shine" | "neutral" | "danger" | "warning" | "success" | "information") | "light" | "dark" | "gray", string>;
19
+ bottom: Record<("primary" | "brand" | "secondary" | "shine" | "neutral" | "danger" | "warning" | "success" | "information") | "light" | "dark" | "gray", string>;
20
+ left: Record<("primary" | "brand" | "secondary" | "shine" | "neutral" | "danger" | "warning" | "success" | "information") | "light" | "dark" | "gray", string>;
21
21
  };
22
22
  width: {
23
23
  top: Record<string | number, any>;
@@ -27,8 +27,8 @@ export declare const border: {
27
27
  };
28
28
  };
29
29
  export declare const borderRadius: Record<string | number, any>;
30
- export declare const backgroundColours: Record<import("../../themes/tokens").ColourGamut | ("primary" | "secondary" | "shine" | "neutral" | "danger" | "warning" | "success" | "information") | "white" | "transparent", string>;
31
- export declare const colours: Record<"primary" | "secondary" | "shine" | "neutral" | "danger" | "warning" | "success" | "information", string>;
30
+ export declare const backgroundColours: Record<import("../../themes/tokens").ColourGamut | ("primary" | "brand" | "secondary" | "shine" | "neutral" | "danger" | "warning" | "success" | "information") | "white" | "transparent", string>;
31
+ export declare const colours: Record<"primary" | "brand" | "secondary" | "shine" | "neutral" | "danger" | "warning" | "success" | "information", string>;
32
32
  export declare const width: Record<"none" | "full", string>;
33
33
  export declare const height: Record<"full", string>;
34
34
  export declare const position: Record<"fixed" | "absolute" | "relative", string>;
package/dist/components/Box/useBoxStyles.css.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useBoxStyles.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Box/useBoxStyles.css.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,OAAO;;;;;CAKnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;CAKlB,CAAC;AAEF,eAAO,MAAM,SAAS,8BAAmD,CAAC;AA2C1E,eAAO,MAAM,MAAM;;;;;;;;;;;;;;CAsBlB,CAAC;AAEF,eAAO,MAAM,YAAY,8BAGxB,CAAC;AAEF,eAAO,MAAM,iBAAiB,0LAE7B,CAAC;AAEF,eAAO,MAAM,OAAO,kHAEnB,CAAC;AAEF,eAAO,MAAM,KAAK,iCAOhB,CAAC;AAEH,eAAO,MAAM,MAAM,wBAIjB,CAAC;AAEH,eAAO,MAAM,QAAQ,mDASpB,CAAC;AAEF,eAAO,MAAM,SAAS,6CASrB,CAAC;AAEF,eAAO,MAAM,QAAQ,0DAUpB,CAAC;AAEF,eAAO,MAAM,OAAO,2GAcnB,CAAC;AAEF,eAAO,MAAM,OAAO,uBAGlB,CAAC;AAEH,eAAO,MAAM,UAAU,wBAErB,CAAC;AAIH,eAAO,MAAM,KAAK,8BAOjB,CAAC;AAEF,eAAO,MAAM,UAAU,8BAOtB,CAAC;AAEF,eAAO,MAAM,aAAa,8BAQzB,CAAC;AAEF,eAAO,MAAM,QAAQ,uBAQpB,CAAC;AAEF,eAAO,MAAM,UAAU,mBAOtB,CAAC;AAEF,eAAO,MAAM,QAAQ,mCAQpB,CAAC;AAEF,eAAO,MAAM,cAAc,8BAS1B,CAAC;AAEF,eAAO,MAAM,aAAa,wBAExB,CAAC"}
1
+ {"version":3,"file":"useBoxStyles.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Box/useBoxStyles.css.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,OAAO;;;;;CAKnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;CAKlB,CAAC;AAEF,eAAO,MAAM,SAAS,8BAAmD,CAAC;AA2C1E,eAAO,MAAM,MAAM;;;;;;;;;;;;;;CAsBlB,CAAC;AAEF,eAAO,MAAM,YAAY,8BAGxB,CAAC;AAEF,eAAO,MAAM,iBAAiB,oMAE7B,CAAC;AAEF,eAAO,MAAM,OAAO,4HAEnB,CAAC;AAEF,eAAO,MAAM,KAAK,iCAOhB,CAAC;AAEH,eAAO,MAAM,MAAM,wBAIjB,CAAC;AAEH,eAAO,MAAM,QAAQ,mDASpB,CAAC;AAEF,eAAO,MAAM,SAAS,6CASrB,CAAC;AAEF,eAAO,MAAM,QAAQ,0DAUpB,CAAC;AAEF,eAAO,MAAM,OAAO,2GAcnB,CAAC;AAEF,eAAO,MAAM,OAAO,uBAGlB,CAAC;AAEH,eAAO,MAAM,UAAU,wBAErB,CAAC;AAIH,eAAO,MAAM,KAAK,8BAOjB,CAAC;AAEF,eAAO,MAAM,UAAU,8BAOtB,CAAC;AAEF,eAAO,MAAM,aAAa,8BAQzB,CAAC;AAEF,eAAO,MAAM,QAAQ,uBAQpB,CAAC;AAEF,eAAO,MAAM,UAAU,mBAOtB,CAAC;AAEF,eAAO,MAAM,QAAQ,mCAQpB,CAAC;AAEF,eAAO,MAAM,cAAc,8BAS1B,CAAC;AAEF,eAAO,MAAM,aAAa,wBAExB,CAAC"}
package/dist/components/Button/Button.css.d.ts CHANGED
@@ -11,6 +11,7 @@ export declare const size: {
11
11
  };
12
12
  export declare const variant: {
13
13
  primary: string;
14
+ brand: string;
14
15
  secondary: string;
15
16
  danger: string;
16
17
  information: string;
@@ -19,6 +20,7 @@ export declare const variant: {
19
20
  };
20
21
  export declare const defaultStates: {
21
22
  primary: string;
23
+ brand: string;
22
24
  secondary: string;
23
25
  danger: string;
24
26
  information: string;
@@ -31,6 +33,7 @@ export declare const minimal: {
31
33
  };
32
34
  export declare const minimalStates: {
33
35
  primary: string;
36
+ brand: string;
34
37
  secondary: string;
35
38
  danger: string;
36
39
  information: string;
package/dist/components/Button/Button.css.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Button/Button.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,IAAI,QAQf,CAAC;AAEH,eAAO,MAAM,IAAI,QAIf,CAAC;AAEH,eAAO,MAAM,aAAa,QAExB,CAAC;AACH,eAAO,MAAM,OAAO,QAElB,CAAC;AAEH,eAAO,MAAM,OAAO,QAElB,CAAC;AAEH,eAAO,MAAM,QAAQ,QAGnB,CAAC;AAEH,eAAO,MAAM,OAAO,QAElB,CAAC;AAIH,eAAO,MAAM,IAAI;;;CA2BhB,CAAC;AACF,eAAO,MAAM,OAAO;;;;;;;CA+BnB,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;CA+EzB,CAAC;AAEF,eAAO,MAAM,OAAO;;;CAOnB,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;CAyEzB,CAAC"}
1
+ {"version":3,"file":"Button.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Button/Button.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,IAAI,QAQf,CAAC;AAEH,eAAO,MAAM,IAAI,QAIf,CAAC;AAEH,eAAO,MAAM,aAAa,QAExB,CAAC;AACH,eAAO,MAAM,OAAO,QAElB,CAAC;AAEH,eAAO,MAAM,OAAO,QAElB,CAAC;AAEH,eAAO,MAAM,QAAQ,QAGnB,CAAC;AAEH,eAAO,MAAM,OAAO,QAElB,CAAC;AAIH,eAAO,MAAM,IAAI;;;CA2BhB,CAAC;AACF,eAAO,MAAM,OAAO;;;;;;;;CAoCnB,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;CA4FzB,CAAC;AAEF,eAAO,MAAM,OAAO;;;CAOnB,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;CAqFzB,CAAC"}
package/dist/components/Button/Button.css.js CHANGED
@@ -68,6 +68,11 @@ export const variant = {
68
68
  backgroundColor: vars.colours.intent.primary.background.standard,
69
69
  boxShadow: "inset 0 0 0 1px ".concat(vars.colours.intent.primary.border, ", ").concat(vars.elevation['2'])
70
70
  }, "variant_primary"),
71
+ brand: style({
72
+ color: vars.colours.intent.brand.foreground,
73
+ backgroundColor: vars.colours.intent.brand.background.standard,
74
+ boxShadow: "inset 0 0 0 1px ".concat(vars.colours.intent.brand.border, ", ").concat(vars.elevation['2'])
75
+ }, "variant_brand"),
71
76
  secondary: style({
72
77
  color: vars.colours.intent.secondary.foreground,
73
78
  backgroundColor: vars.colours.intent.secondary.background.standard,
@@ -108,6 +113,19 @@ export const defaultStates = {
108
113
  backgroundColor: vars.colours.intent.primary.background.strong
109
114
  }
110
115
  }, "defaultStates_primary"),
116
+ brand: style({
117
+ ':hover': {
118
+ color: vars.colours.intent.brand.foreground,
119
+ backgroundColor: vars.colours.intent.brand.background.strong,
120
+ boxShadow: "inset 0 0 0 1px ".concat(vars.colours.intent.brand.border, ", ").concat(vars.elevation['3'])
121
+ },
122
+ ':active': {
123
+ transform: 'scale(0.97)',
124
+ boxShadow: "inset 0 0 0 1px ".concat(vars.colours.intent.brand.border, ", ").concat(vars.elevation['1']),
125
+ color: vars.colours.intent.brand.foreground,
126
+ backgroundColor: vars.colours.intent.brand.background.strong
127
+ }
128
+ }, "defaultStates_brand"),
111
129
  secondary: style({
112
130
  ':hover': {
113
131
  color: vars.colours.intent.secondary.foreground,
@@ -195,6 +213,18 @@ export const minimalStates = {
195
213
  boxShadow: 'none'
196
214
  }
197
215
  }, "minimalStates_primary"),
216
+ brand: style({
217
+ ':hover': {
218
+ color: vars.colours.intent.brand.background.strong,
219
+ backgroundColor: vars.colours.intent.brand.background.mild,
220
+ boxShadow: 'none'
221
+ },
222
+ ':active': {
223
+ color: vars.colours.intent.brand.background.strong,
224
+ backgroundColor: vars.colours.intent.brand.background.mild,
225
+ boxShadow: 'none'
226
+ }
227
+ }, "minimalStates_brand"),
198
228
  secondary: style({
199
229
  ':hover': {
200
230
  color: vars.typography.colour.secondary,
package/dist/components/Button/stories.js CHANGED
@@ -219,6 +219,20 @@ const primaryMediumProps = {
219
219
  };
220
220
  export const primaryMedium = TemplateMulti.bind(primaryMediumProps);
221
221
  primaryMedium.args = primaryMediumProps;
222
+ const brandSmallProps = {
223
+ size: 'small',
224
+ variant: 'brand',
225
+ onClick
226
+ };
227
+ export const brandSmall = TemplateMulti.bind(brandSmallProps);
228
+ brandSmall.args = brandSmallProps;
229
+ const brandMediumProps = {
230
+ size: 'medium',
231
+ variant: 'brand',
232
+ onClick
233
+ };
234
+ export const brandMedium = TemplateMulti.bind(brandMediumProps);
235
+ brandMedium.args = brandMediumProps;
222
236
  const secondarySmallProps = {
223
237
  size: 'small',
224
238
  variant: 'secondary',
package/dist/components/Image/stories.js CHANGED
@@ -3,6 +3,7 @@
3
3
  import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
4
4
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
5
5
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
6
+ import isChromatic from 'chromatic/isChromatic';
6
7
  import * as React from 'react';
7
8
  import { Stack } from "../Stack/index.js";
8
9
  import { Text } from "../Text/index.js";
@@ -10,7 +11,8 @@ import { ImageServerProvider, widthMap } from "./ImageServerProvider.js";
10
11
  import { Image } from "./index.js";
11
12
  import { jsx as _jsx } from "react/jsx-runtime";
12
13
  import { jsxs as _jsxs } from "react/jsx-runtime";
13
- const sizeOptions = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16'];
14
+ const sizeOptions = isChromatic() ? ['8'] : ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16'];
15
+ const qualityOptions = isChromatic() ? ['70'] : [1, 20, 40, 60, 80, 100];
14
16
  export default {
15
17
  title: 'Foundation/Image/Image',
16
18
  component: Image,
@@ -124,7 +126,7 @@ const AllQualityTemplate = args => _jsx(ImageServerProvider, {
124
126
  },
125
127
  children: _jsx(Stack, {
126
128
  space: "5",
127
- children: [1, 20, 40, 60, 80, 100].map(quality => _jsxs(Stack, {
129
+ children: qualityOptions.map(quality => _jsxs(Stack, {
128
130
  space: "1",
129
131
  children: [_jsxs(Text, {
130
132
  children: ["Quality: ", _jsx(Text, {
package/dist/components/NumberInput/NumberInput.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../../lib/components/NumberInput/NumberInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAc5D,UAAU,KACT,SAAQ,OAAO,CAAC,IAAI,CAAC,gBAAgB,EAAE,KAAK,GAAG,KAAK,GAAG,MAAM,CAAC,CAAC,EAC9D,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC;IAChC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IAC9C,OAAO,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAC9C,MAAM,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAC7C,GAAG,CAAC,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,WAAW,oTA+CvB,CAAC;AAEF,eAAe,WAAW,CAAC"}
1
+ {"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../../lib/components/NumberInput/NumberInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAc5D,UAAU,KACT,SAAQ,OAAO,CAAC,IAAI,CAAC,gBAAgB,EAAE,KAAK,GAAG,KAAK,GAAG,MAAM,CAAC,CAAC,EAC9D,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC;IAChC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IAC9C,OAAO,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAC9C,MAAM,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAC7C,GAAG,CAAC,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,WAAW,oTA8CvB,CAAC;AAEF,eAAe,WAAW,CAAC"}
package/dist/components/Switch/Switch.css.d.ts CHANGED
@@ -1,5 +1,7 @@
1
- export declare const handle: Record<"transition" | "default", string>;
1
+ export declare const handle: Record<"transition" | "default" | "disabled", string>;
2
2
  export declare const toggled: string;
3
+ export declare const untoggled: string;
3
4
  export declare const disabled: Record<"default" | "toggled", string>;
5
+ export declare const focus: string;
4
6
  export declare const root: string;
5
7
  //# sourceMappingURL=Switch.css.d.ts.map
package/dist/components/Switch/Switch.css.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Switch.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Switch/Switch.css.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,MAAM,0CAcjB,CAAC;AAEH,eAAO,MAAM,OAAO,QAGlB,CAAC;AAEH,eAAO,MAAM,QAAQ,uCAkBnB,CAAC;AAEH,eAAO,MAAM,IAAI,QAUf,CAAC"}
1
+ {"version":3,"file":"Switch.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Switch/Switch.css.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,MAAM,uDA0BjB,CAAC;AAEH,eAAO,MAAM,OAAO,QAGlB,CAAC;AAEH,eAAO,MAAM,SAAS,QAUpB,CAAC;AAEH,eAAO,MAAM,QAAQ,uCAmBnB,CAAC;AAEH,eAAO,MAAM,KAAK,QAEhB,CAAC;AAEH,eAAO,MAAM,IAAI,QAWf,CAAC"}
package/dist/components/Switch/Switch.css.js CHANGED
@@ -5,51 +5,79 @@ __vanilla_filescope__.setFileScope("lib/components/Switch/Switch.css.ts", "@auto
5
5
  import { style, styleVariants } from '@vanilla-extract/css';
6
6
  import { themeContractVars as vars } from "../../themes/theme.css.js";
7
7
  const handleSize = '24px';
8
- const handleOffset = '2px';
8
+ const handleOffset = '3px';
9
9
  const borderSize = '1px';
10
10
  export const handle = styleVariants({
11
+ disabled: {
12
+ border: "".concat(borderSize, " solid ").concat(vars.colours.intent.primary.background.mild)
13
+ },
11
14
  default: {
12
- borderColor: vars.border.colours.gray,
15
+ borderSize: "".concat(borderSize),
13
16
  top: "calc(".concat(handleOffset, " - ").concat(borderSize, ")"),
14
- left: "calc(".concat(handleOffset, " - ").concat(borderSize, ")"),
15
- width: "".concat(handleSize),
16
- height: "".concat(handleSize),
17
+ left: "calc(1.5 * ".concat(handleOffset, ")"),
18
+ width: "calc(".concat(handleSize, " - (2 * ").concat(handleOffset, "))"),
19
+ height: "calc(".concat(handleSize, " - (2 * ").concat(handleOffset, "))"),
17
20
  transition: 'transform 0.2s cubic-bezier(0, 0, 0.2, 1) 0s',
18
- willChange: 'transform'
21
+ willChange: 'transform',
22
+ selectors: {
23
+ '&:hover': {
24
+ transform: 'scale(0.9)'
25
+ }
26
+ }
19
27
  },
20
28
  transition: {
21
29
  transform: "translateX(calc(".concat(handleSize, " - (2 * ").concat(handleOffset, ")))"),
22
- borderColor: vars.colours.intent.primary.background.strong
30
+ selectors: {
31
+ '&:hover': {
32
+ transform: "translateX(calc(".concat(handleSize, " - (2 * ").concat(handleOffset, "))) scale(0.9)")
33
+ }
34
+ }
23
35
  }
24
36
  }, "handle");
25
37
  export const toggled = style({
26
- borderColor: vars.colours.intent.primary.background.strong,
27
- backgroundColor: vars.colours.intent.primary.background.standard
38
+ border: "".concat(borderSize, " solid ").concat(vars.colours.intent.primary.background.strong),
39
+ backgroundColor: vars.colours.intent.primary.background.strong
28
40
  }, "toggled");
41
+ export const untoggled = style({
42
+ border: "".concat(borderSize, " solid color-mix(in oklch, ").concat(vars.colours.intent.primary.background.standard, ", transparent 60%)"),
43
+ backgroundColor: vars.colours.intent.primary.background.mild,
44
+ transition: '0.2s cubic-bezier(0, 0, 0.2, 1) 0s',
45
+ selectors: {
46
+ '&:hover': {
47
+ borderColor: vars.colours.intent.primary.background.strong,
48
+ backgroundColor: vars.colours.intent.primary.background.strong
49
+ }
50
+ }
51
+ }, "untoggled");
29
52
  export const disabled = styleVariants({
30
53
  default: {
31
54
  selectors: {
32
55
  '&[aria-disabled=true]': {
33
56
  cursor: 'not-allowed',
34
- borderColor: vars.border.colours.light,
35
- backgroundColor: vars.border.colours.light
57
+ border: "".concat(borderSize, " solid ").concat(vars.colours.intent.primary.background.mild),
58
+ backgroundColor: 'white'
36
59
  }
37
60
  }
38
61
  },
39
62
  toggled: {
40
63
  selectors: {
41
64
  '&[aria-disabled=true]': {
42
- borderColor: vars.border.colours.light,
43
- backgroundColor: vars.colours.intent.primary.background.mild
65
+ cursor: 'not-allowed',
66
+ border: "".concat(borderSize, " solid ").concat(vars.colours.intent.primary.background.mild),
67
+ backgroundColor: 'white'
44
68
  }
45
69
  }
46
70
  }
47
71
  }, "disabled");
72
+ export const focus = style({
73
+ outline: "calc(".concat(handleOffset, " - ").concat(borderSize, ") solid ").concat(vars.colours.intent.brand.background.standard)
74
+ }, "focus");
48
75
  export const root = style({
49
- width: "calc((2 * ".concat(handleSize, ") + ").concat(handleOffset, " - 2 * ").concat(borderSize, ")"),
50
- height: "calc(".concat(handleSize, " + (").concat(handleOffset, " * 2))"),
76
+ width: "calc((2 * ".concat(handleSize, ") - 2 * ").concat(borderSize, ")"),
77
+ height: "".concat(handleSize),
78
+ top: "calc(".concat(handleOffset, " - ").concat(borderSize, ")"),
79
+ left: "calc(1.5 * ".concat(handleOffset, ")"),
51
80
  transition: 'background-color 0.2s cubic-bezier(0, 0, 0.2, 1) 0s',
52
- border: "".concat(borderSize, " solid ").concat(vars.border.colours.light),
53
81
  selectors: {
54
82
  ["&:not(".concat(disabled.default, "):not(").concat(disabled.toggled, "):focus")]: {
55
83
  borderColor: vars.colours.intent.information.background.standard
package/dist/components/Switch/Switch.d.ts CHANGED
@@ -1,10 +1,11 @@
1
1
  import { AnchorHTMLAttributes, FunctionComponent } from 'react';
2
- export interface Props extends Omit<AnchorHTMLAttributes<HTMLButtonElement>, 'children' | 'style' | 'is' | 'onChange'> {
2
+ import { useSwitch } from 'react-aria';
3
+ type AriaSwitchProps = Parameters<typeof useSwitch>[0];
4
+ export type SwitchProps = AriaSwitchProps & Omit<AnchorHTMLAttributes<HTMLButtonElement>, 'children' | 'style' | 'is' | 'onChange'> & {
3
5
  className?: string;
4
6
  disabled?: boolean;
5
7
  toggled?: boolean;
6
- onChange?(value: boolean): void;
7
- }
8
- export declare const Switch: FunctionComponent<Props>;
8
+ };
9
+ export declare const Switch: FunctionComponent;
9
10
  export default Switch;
10
11
  //# sourceMappingURL=Switch.d.ts.map
package/dist/components/Switch/Switch.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../lib/components/Switch/Switch.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,iBAAiB,EAAe,MAAM,OAAO,CAAC;AAO7E,MAAM,WAAW,KAChB,SAAQ,IAAI,CACX,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,UAAU,GAAG,OAAO,GAAG,IAAI,GAAG,UAAU,CACxC;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,QAAQ,CAAC,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;CAChC;AAED,eAAO,MAAM,MAAM,EAAE,iBAAiB,CAAC,KAAK,CAwD3C,CAAC;AAEF,eAAe,MAAM,CAAC"}
1
+ {"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../lib/components/Switch/Switch.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,oBAAoB,EAAE,iBAAiB,EAAU,MAAM,OAAO,CAAC;AACxE,OAAO,EAAE,SAAS,EAAgC,MAAM,YAAY,CAAC;AAMrE,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;AACvD,MAAM,MAAM,WAAW,GAAG,eAAe,GACxC,IAAI,CACH,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,UAAU,GAAG,OAAO,GAAG,IAAI,GAAG,UAAU,CACxC,GAAG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAInB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAInB,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEH,eAAO,MAAM,MAAM,EAAE,iBAiEpB,CAAC;AAEF,eAAe,MAAM,CAAC"}
package/dist/components/Switch/Switch.js CHANGED
@@ -2,63 +2,80 @@
2
2
 
3
3
  import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
4
4
  import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
5
- const _excluded = ["className", "disabled", "toggled", "onChange"];
5
+ const _excluded = ["className", "disabled", "toggled", "isSelected", "isDisabled"];
6
6
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
7
7
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
8
+ import { useToggleState } from '@react-stately/toggle';
8
9
  import clsx from 'clsx';
9
10
  import * as React from 'react';
10
- import { useCallback } from 'react';
11
+ import { useRef } from 'react';
12
+ import { useSwitch, useFocusRing, VisuallyHidden } from 'react-aria';
11
13
  import { Box, useBoxStyles } from "../Box/index.js";
12
14
  import { useTextStyles } from "../Text/index.js";
13
15
  import * as styles from "./Switch.css.js";
14
16
  import { jsx as _jsx } from "react/jsx-runtime";
17
+ import { jsxs as _jsxs } from "react/jsx-runtime";
15
18
  export const Switch = _ref => {
16
19
  let {
17
- className = '',
18
- disabled = false,
19
- toggled = false,
20
- onChange
20
+ className,
21
+ disabled,
22
+ toggled,
23
+ isSelected,
24
+ isDisabled
21
25
  } = _ref,
22
- rest = _objectWithoutProperties(_ref, _excluded);
23
- const onToggle = useCallback(() => {
24
- if (disabled) {
25
- return;
26
- }
27
- if (typeof onChange === 'function') {
28
- onChange(!toggled);
29
- }
30
- }, [disabled, toggled]);
31
- return _jsx(Box, _objectSpread(_objectSpread({
32
- is: "button"
33
- }, rest), {}, {
34
- className: clsx(styles.root, useTextStyles({
35
- size: '5'
36
- }), {
37
- [styles.toggled]: toggled,
38
- [styles.disabled.default]: disabled,
39
- [styles.disabled.toggled]: toggled && disabled
40
- }, className),
41
- tabIndex: disabled ? -1 : void 0,
42
- borderRadius: "pill",
43
- position: "relative",
44
- "aria-disabled": disabled,
45
- "aria-label": "toggle ".concat(toggled ? 'on' : 'off'),
46
- onClick: onToggle,
47
- children: _jsx(Box, {
48
- borderWidth: "1",
49
- position: "absolute",
50
- borderRadius: "pill",
51
- backgroundColour: "white",
52
- padding: "none",
53
- boxShadow: "2",
54
- className: clsx(styles.handle.default, useBoxStyles({
55
- is: 'button'
56
- }), useTextStyles({
57
- colour: 'white'
26
+ incomingProps = _objectWithoutProperties(_ref, _excluded);
27
+ const props = _objectSpread(_objectSpread({}, incomingProps), {}, {
28
+ isDisabled: isDisabled || disabled,
29
+ isSelected: isSelected || toggled
30
+ });
31
+ const state = useToggleState(props);
32
+ const ref = useRef(null);
33
+ const {
34
+ inputProps
35
+ } = useSwitch(props, state, ref);
36
+ const {
37
+ isFocusVisible,
38
+ focusProps
39
+ } = useFocusRing();
40
+ return _jsxs("label", {
41
+ children: [_jsx(VisuallyHidden, {
42
+ children: _jsx("input", _objectSpread(_objectSpread(_objectSpread({}, inputProps), focusProps), {}, {
43
+ ref: ref
44
+ }))
45
+ }), _jsx(Box, {
46
+ className: clsx(styles.root, useTextStyles({
47
+ size: '5'
58
48
  }), {
59
- [styles.handle.transition]: toggled
49
+ [styles.disabled.default]: inputProps.disabled,
50
+ [styles.disabled.toggled]: state.isSelected && inputProps.disabled,
51
+ [styles.toggled]: state.isSelected,
52
+ [styles.untoggled]: !state.isSelected,
53
+ [styles.focus]: isFocusVisible
54
+ }, className),
55
+ tabIndex: inputProps.disabled ? -1 : void 0,
56
+ borderRadius: "pill",
57
+ position: "relative",
58
+ "aria-disabled": inputProps.disabled,
59
+ "aria-label": "toggle ".concat(state.isSelected ? 'on' : 'off'),
60
+ children: _jsx(Box, {
61
+ borderWidth: "1",
62
+ position: "absolute",
63
+ borderRadius: "pill",
64
+ backgroundColour: "white",
65
+ padding: "none",
66
+ pointerEvents: inputProps.disabled ? 'none' : void 0,
67
+ boxShadow: "2",
68
+ className: clsx(styles.handle.default, useBoxStyles({
69
+ is: 'button'
70
+ }), useTextStyles({
71
+ colour: 'white'
72
+ }), {
73
+ [styles.handle.transition]: state.isSelected,
74
+ [styles.handle.default]: inputProps.disabled,
75
+ [styles.handle.disabled]: inputProps.disabled
76
+ })
60
77
  })
61
- })
62
- }));
78
+ }), props.children]
79
+ });
63
80
  };
64
81
  export default Switch;
package/dist/components/Switch/stories.js CHANGED
@@ -1,8 +1,7 @@
1
1
  "use strict";
2
2
 
3
3
  import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
4
- import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
5
- const _excluded = ["onChange", "value"];
4
+ import _objectDestructuringEmpty from "@babel/runtime/helpers/esm/objectDestructuringEmpty";
6
5
  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
7
6
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
8
7
  import { action } from '@storybook/addon-actions';
@@ -14,39 +13,30 @@ export default {
14
13
  component: Switch
15
14
  };
16
15
  const Template = _ref => {
17
- let {
18
- onChange: incomingOnChange,
19
- value
20
- } = _ref,
21
- args = _objectWithoutProperties(_ref, _excluded);
22
- return _jsx(Switch, _objectSpread({
23
- onChange: stepValue => {
24
- setValue(stepValue);
25
- incomingOnChange(stepValue);
26
- },
27
- value: value
28
- }, args));
16
+ let args = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
17
+ return _jsx(Switch, _objectSpread({}, args));
29
18
  };
30
19
  const standardProps = {
31
- disabled: false,
32
- toggled: false,
33
- onChange: action('onChange')
20
+ isDisabled: false,
21
+ isSelected: false,
22
+ onChange: action('onChange'),
23
+ className: 'toggleButton-class'
34
24
  };
35
25
  export const untoggled = Template.bind(standardProps);
36
26
  untoggled.args = standardProps;
37
27
  const untoggledDisabledProps = _objectSpread(_objectSpread({}, standardProps), {}, {
38
- disabled: true
28
+ isDisabled: true
39
29
  });
40
30
  export const untoggledDisabled = Template.bind(untoggledDisabledProps);
41
31
  untoggledDisabled.args = untoggledDisabledProps;
42
32
  const toggledProps = _objectSpread(_objectSpread({}, standardProps), {}, {
43
- toggled: true
33
+ isSelected: true
44
34
  });
45
35
  export const toggled = Template.bind(toggledProps);
46
36
  toggled.args = toggledProps;
47
37
  const toggledDisabledProps = _objectSpread(_objectSpread({}, standardProps), {}, {
48
- toggled: true,
49
- disabled: true
38
+ isSelected: true,
39
+ isDisabled: true
50
40
  });
51
41
  export const toggledDisabled = Template.bind(toggledDisabledProps);
52
42
  toggledDisabled.args = toggledDisabledProps;
package/dist/components/Text/useTextStyles.css.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  export declare const root: string;
2
2
  export declare const sizes: Record<"1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9", string>;
3
- export declare const colours: Record<"primary" | "secondary" | "shine" | "neutral" | "danger" | "warning" | "success" | "information" | "light" | "dark" | "white" | "link" | "muted", string>;
3
+ export declare const colours: Record<"primary" | "brand" | "secondary" | "shine" | "neutral" | "danger" | "warning" | "success" | "information" | "light" | "dark" | "white" | "link" | "muted", string>;
4
4
  export declare const fontWeight: Record<"normal" | "semiBold" | "bold", string>;
5
5
  export declare const noWrap: string;
6
6
  export declare const breakWord: string;
package/dist/components/Text/useTextStyles.css.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useTextStyles.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Text/useTextStyles.css.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,IAAI,QAOf,CAAC;AAEH,eAAO,MAAM,KAAK,qEAWjB,CAAC;AAEF,eAAO,MAAM,OAAO,kKAEnB,CAAC;AAEF,eAAO,MAAM,UAAU,gDAEtB,CAAC;AAEF,eAAO,MAAM,MAAM,QAAkC,CAAC;AACtD,eAAO,MAAM,SAAS,QAAqC,CAAC;AAE5D,eAAO,MAAM,SAAS,4CAKrB,CAAC"}
1
+ {"version":3,"file":"useTextStyles.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Text/useTextStyles.css.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,IAAI,QAOf,CAAC;AAEH,eAAO,MAAM,KAAK,qEAWjB,CAAC;AAEF,eAAO,MAAM,OAAO,4KAEnB,CAAC;AAEF,eAAO,MAAM,UAAU,gDAEtB,CAAC;AAEF,eAAO,MAAM,MAAM,QAAkC,CAAC;AACtD,eAAO,MAAM,SAAS,QAAqC,CAAC;AAE5D,eAAO,MAAM,SAAS,4CAKrB,CAAC"}
package/dist/components/TextAreaInput/TextAreaInput.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TextAreaInput.d.ts","sourceRoot":"","sources":["../../../lib/components/TextAreaInput/TextAreaInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,eAAO,MAAM,aAAa,uWA6BzB,CAAC;AAEF,eAAe,aAAa,CAAC"}
1
+ {"version":3,"file":"TextAreaInput.d.ts","sourceRoot":"","sources":["../../../lib/components/TextAreaInput/TextAreaInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,eAAO,MAAM,aAAa,uWA2BzB,CAAC;AAEF,eAAe,aAAa,CAAC"}
package/dist/themes/base/index.d.ts CHANGED
@@ -27,6 +27,15 @@ declare const _default: {
27
27
  colours: {
28
28
  gamut: {
29
29
  white: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
30
+ black900: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
31
+ black800: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
32
+ black700: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
33
+ black600: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
34
+ black500: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
35
+ black400: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
36
+ black300: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
37
+ black200: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
38
+ black100: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
30
39
  red900: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
31
40
  red800: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
32
41
  red700: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -93,6 +102,15 @@ declare const _default: {
93
102
  foreground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
94
103
  border: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
95
104
  };
105
+ brand: {
106
+ background: {
107
+ standard: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
108
+ mild: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
109
+ strong: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
110
+ };
111
+ foreground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
112
+ border: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
113
+ };
96
114
  secondary: {
97
115
  background: {
98
116
  standard: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -227,6 +245,7 @@ declare const _default: {
227
245
  };
228
246
  colour: {
229
247
  primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
248
+ brand: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
230
249
  secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
231
250
  shine: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
232
251
  link: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
package/dist/themes/base/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/themes/base/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBAKE"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/themes/base/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBAKE"}
package/dist/themes/base/tokens.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../lib/themes/base/tokens.ts"],"names":[],"mappings":"AACA,OAAO,EAAa,MAAM,EAAE,MAAM,WAAW,CAAC;AAgE9C,eAAO,MAAM,YAAY,iDAAqC,CAAC;AAI/D,eAAO,MAAM,MAAM,EAAE,MAuNpB,CAAC"}
1
+ {"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../lib/themes/base/tokens.ts"],"names":[],"mappings":"AACA,OAAO,EAAa,MAAM,EAAE,MAAM,WAAW,CAAC;AA4E9C,eAAO,MAAM,YAAY,iDAAqC,CAAC;AAI/D,eAAO,MAAM,MAAM,EAAE,MAiOpB,CAAC"}
package/dist/themes/base/tokens.js CHANGED
@@ -5,6 +5,17 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
5
5
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
6
6
  import { buildColourGamut } from "../makeTheme.js";
7
7
  const baseThemeColours = {
8
+ black: {
9
+ '900': '#222222',
10
+ '800': '#2A2C2A',
11
+ '700': '#444644',
12
+ '600': '#626262',
13
+ '500': '#808080',
14
+ '400': '#ADB1B5',
15
+ '300': '#D4D9DD',
16
+ '200': '#DDE0E3',
17
+ '100': '#E4E4E4'
18
+ },
8
19
  gray: {
9
20
  '900': '#212338',
10
21
  '800': '#34384c',
@@ -111,6 +122,15 @@ export const tokens = {
111
122
  foreground: white,
112
123
  border: baseThemeColours.green['900']
113
124
  },
125
+ brand: {
126
+ background: {
127
+ standard: baseThemeColours.green['700'],
128
+ mild: baseThemeColours.green['200'],
129
+ strong: baseThemeColours.green['900']
130
+ },
131
+ foreground: white,
132
+ border: baseThemeColours.gray['900']
133
+ },
114
134
  secondary: {
115
135
  background: {
116
136
  standard: white,
@@ -246,6 +266,7 @@ export const tokens = {
246
266
  colour: {
247
267
  primary: baseThemeColours.green['600'],
248
268
  secondary: baseThemeColours.gray['700'],
269
+ brand: baseThemeColours.green['600'],
249
270
  shine: baseThemeColours.yellow['500'],
250
271
  link: baseThemeColours.blue['500'],
251
272
  dark: baseThemeColours.gray['900'],
package/dist/themes/flat_red/index.d.ts CHANGED
@@ -27,6 +27,15 @@ declare const _default: {
27
27
  colours: {
28
28
  gamut: {
29
29
  white: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
30
+ black900: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
31
+ black800: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
32
+ black700: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
33
+ black600: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
34
+ black500: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
35
+ black400: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
36
+ black300: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
37
+ black200: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
38
+ black100: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
30
39
  red900: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
31
40
  red800: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
32
41
  red700: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -93,6 +102,15 @@ declare const _default: {
93
102
  foreground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
94
103
  border: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
95
104
  };
105
+ brand: {
106
+ background: {
107
+ standard: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
108
+ mild: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
109
+ strong: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
110
+ };
111
+ foreground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
112
+ border: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
113
+ };
96
114
  secondary: {
97
115
  background: {
98
116
  standard: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -227,6 +245,7 @@ declare const _default: {
227
245
  };
228
246
  colour: {
229
247
  primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
248
+ brand: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
230
249
  secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
231
250
  shine: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
232
251
  link: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
package/dist/themes/flat_red/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/themes/flat_red/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBAKE"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/themes/flat_red/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBAKE"}
package/dist/themes/flat_red/tokens.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../lib/themes/flat_red/tokens.ts"],"names":[],"mappings":"AAsEA,eAAO,MAAM,MAAM,KA4CI,CAAC"}
1
+ {"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../lib/themes/flat_red/tokens.ts"],"names":[],"mappings":"AAkFA,eAAO,MAAM,MAAM,KAoDI,CAAC"}
package/dist/themes/flat_red/tokens.js CHANGED
@@ -7,6 +7,17 @@ import deepmerge from 'deepmerge';
7
7
  import { tokens as baseTokens } from "../base/tokens.js";
8
8
  import { buildColourGamut } from "../makeTheme.js";
9
9
  const colours = {
10
+ black: {
11
+ 900: '#222222',
12
+ 800: '#2A2C2A',
13
+ 700: '#444644',
14
+ 600: '#626262',
15
+ 500: '#808080',
16
+ 400: '#ADB1B5',
17
+ 300: '#D4D9DD',
18
+ 200: '#DDE0E3',
19
+ 100: '#E4E4E4'
20
+ },
10
21
  gray: {
11
22
  900: '#263238',
12
23
  800: '#37474F',
@@ -79,6 +90,14 @@ export const tokens = deepmerge(baseTokens, {
79
90
  },
80
91
  border: colours.red['900']
81
92
  },
93
+ brand: {
94
+ background: {
95
+ standard: colours.red['600'],
96
+ mild: colours.red['100'],
97
+ strong: colours.red['900']
98
+ },
99
+ border: colours.red['900']
100
+ },
82
101
  secondary: {
83
102
  background: {
84
103
  strong: colours.gray['100']
package/dist/themes/neutral/index.d.ts CHANGED
@@ -27,6 +27,15 @@ declare const _default: {
27
27
  colours: {
28
28
  gamut: {
29
29
  white: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
30
+ black900: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
31
+ black800: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
32
+ black700: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
33
+ black600: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
34
+ black500: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
35
+ black400: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
36
+ black300: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
37
+ black200: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
38
+ black100: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
30
39
  red900: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
31
40
  red800: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
32
41
  red700: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -93,6 +102,15 @@ declare const _default: {
93
102
  foreground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
94
103
  border: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
95
104
  };
105
+ brand: {
106
+ background: {
107
+ standard: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
108
+ mild: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
109
+ strong: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
110
+ };
111
+ foreground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
112
+ border: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
113
+ };
96
114
  secondary: {
97
115
  background: {
98
116
  standard: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -227,6 +245,7 @@ declare const _default: {
227
245
  };
228
246
  colour: {
229
247
  primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
248
+ brand: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
230
249
  secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
231
250
  shine: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
232
251
  link: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
package/dist/themes/neutral/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/themes/neutral/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBAKE"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/themes/neutral/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBAKE"}
package/dist/themes/neutral/tokens.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../lib/themes/neutral/tokens.ts"],"names":[],"mappings":"AACA,OAAO,EAAa,MAAM,EAAE,MAAM,WAAW,CAAC;AAkE9C,eAAO,MAAM,MAAM,EAAE,MAuNpB,CAAC"}
1
+ {"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../lib/themes/neutral/tokens.ts"],"names":[],"mappings":"AACA,OAAO,EAAa,MAAM,EAAE,MAAM,WAAW,CAAC;AA8E9C,eAAO,MAAM,MAAM,EAAE,MAiOpB,CAAC"}
package/dist/themes/neutral/tokens.js CHANGED
@@ -5,60 +5,71 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
5
5
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
6
6
  import { buildColourGamut } from "../makeTheme.js";
7
7
  const colours = {
8
+ black: {
9
+ 900: '#222222',
10
+ 800: '#2A2C2A',
11
+ 700: '#444644',
12
+ 600: '#626262',
13
+ 500: '#808080',
14
+ 400: '#ADB1B5',
15
+ 300: '#D4D9DD',
16
+ 200: '#DDE0E3',
17
+ 100: '#E4E4E4'
18
+ },
8
19
  gray: {
9
- '900': '#212338',
10
- '800': '#34384c',
11
- '700': '#484c5f',
12
- '600': '#5c6172',
13
- '500': '#6c7283',
14
- '400': '#8f95a1',
15
- '300': '#d4d9dd',
16
- '200': '#eef0f2',
17
- '100': '#fafbfc'
20
+ 900: '#212338',
21
+ 800: '#34384c',
22
+ 700: '#484c5f',
23
+ 600: '#5c6172',
24
+ 500: '#6c7283',
25
+ 400: '#8f95a1',
26
+ 300: '#d4d9dd',
27
+ 200: '#eef0f2',
28
+ 100: '#fafbfc'
18
29
  },
19
30
  green: {
20
- '900': '#078171',
21
- '800': '#05987a',
22
- '700': '#03af83',
23
- '600': '#01c68c',
24
- '500': '#00dd95',
25
- '400': '#36e5aa',
26
- '300': '#71edc2',
27
- '200': '#e3f8f0',
28
- '100': '#f2fdf9'
31
+ 900: '#078171',
32
+ 800: '#05987a',
33
+ 700: '#03af83',
34
+ 600: '#01c68c',
35
+ 500: '#00dd95',
36
+ 400: '#36e5aa',
37
+ 300: '#71edc2',
38
+ 200: '#e3f8f0',
39
+ 100: '#f2fdf9'
29
40
  },
30
41
  blue: {
31
- '900': '#0d47a1',
32
- '800': '#0d4bb7',
33
- '700': '#0d50ce',
34
- '600': '#0d54e5',
35
- '500': '#0d59fc',
36
- '400': '#4680fc',
37
- '300': '#80a7fd',
38
- '200': '#e1edfe',
39
- '100': '#f3f8ff'
42
+ 900: '#0d47a1',
43
+ 800: '#0d4bb7',
44
+ 700: '#0d50ce',
45
+ 600: '#0d54e5',
46
+ 500: '#0d59fc',
47
+ 400: '#4680fc',
48
+ 300: '#80a7fd',
49
+ 200: '#e1edfe',
50
+ 100: '#f3f8ff'
40
51
  },
41
52
  yellow: {
42
- '900': '#f38e29',
43
- '800': '#f69a1f',
44
- '700': '#f9a715',
45
- '600': '#fcb30b',
46
- '500': '#ffc001',
47
- '400': '#ffcf3d',
48
- '300': '#ffde79',
49
- '200': '#ffedb5',
50
- '100': '#fffcf2'
53
+ 900: '#f38e29',
54
+ 800: '#f69a1f',
55
+ 700: '#f9a715',
56
+ 600: '#fcb30b',
57
+ 500: '#ffc001',
58
+ 400: '#ffcf3d',
59
+ 300: '#ffde79',
60
+ 200: '#ffedb5',
61
+ 100: '#fffcf2'
51
62
  },
52
63
  red: {
53
- '900': '#780502',
54
- '800': '#96110e',
55
- '700': '#b51e1a',
56
- '600': '#d42b26',
57
- '500': '#e12e28',
58
- '400': '#e85f5b',
59
- '300': '#ef918e',
60
- '200': '#ffd4d4',
61
- '100': '#fdf4f4'
64
+ 900: '#780502',
65
+ 800: '#96110e',
66
+ 700: '#b51e1a',
67
+ 600: '#d42b26',
68
+ 500: '#e12e28',
69
+ 400: '#e85f5b',
70
+ 300: '#ef918e',
71
+ 200: '#ffd4d4',
72
+ 100: '#fdf4f4'
62
73
  }
63
74
  };
64
75
  const white = '#fff';
@@ -103,9 +114,18 @@ export const tokens = {
103
114
  intent: {
104
115
  primary: {
105
116
  background: {
106
- standard: colours.gray['700'],
107
- mild: colours.gray['200'],
108
- strong: colours.gray['900']
117
+ standard: colours.black['900'],
118
+ mild: colours.black['300'],
119
+ strong: colours.black['900']
120
+ },
121
+ foreground: white,
122
+ border: colours.gray['900']
123
+ },
124
+ brand: {
125
+ background: {
126
+ standard: colours.green['700'],
127
+ mild: colours.green['200'],
128
+ strong: colours.green['900']
109
129
  },
110
130
  foreground: white,
111
131
  border: colours.gray['900']
@@ -243,7 +263,8 @@ export const tokens = {
243
263
  }
244
264
  },
245
265
  colour: {
246
- primary: colours.gray['800'],
266
+ primary: colours.black['800'],
267
+ brand: colours.green['600'],
247
268
  secondary: colours.gray['600'],
248
269
  shine: colours.yellow['500'],
249
270
  link: colours.blue['500'],
package/dist/themes/theme.css.d.ts CHANGED
@@ -24,6 +24,15 @@ export declare const themeContractVars: {
24
24
  colours: {
25
25
  gamut: {
26
26
  white: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
27
+ black900: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
28
+ black800: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
29
+ black700: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
30
+ black600: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
31
+ black500: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
32
+ black400: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
33
+ black300: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
34
+ black200: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
35
+ black100: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
27
36
  red900: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
28
37
  red800: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
29
38
  red700: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -90,6 +99,15 @@ export declare const themeContractVars: {
90
99
  foreground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
91
100
  border: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
92
101
  };
102
+ brand: {
103
+ background: {
104
+ standard: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
105
+ mild: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
106
+ strong: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
107
+ };
108
+ foreground: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
109
+ border: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
110
+ };
93
111
  secondary: {
94
112
  background: {
95
113
  standard: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -224,6 +242,7 @@ export declare const themeContractVars: {
224
242
  };
225
243
  colour: {
226
244
  primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
245
+ brand: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
227
246
  secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
228
247
  shine: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
229
248
  link: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
package/dist/themes/theme.css.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"theme.css.d.ts","sourceRoot":"","sources":["../../lib/themes/theme.css.ts"],"names":[],"mappings":"AAmEA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuN5B,CAAC;AAEH,eAAO,MAAM,SAAS,QAGpB,CAAC"}
1
+ {"version":3,"file":"theme.css.d.ts","sourceRoot":"","sources":["../../lib/themes/theme.css.ts"],"names":[],"mappings":"AA+EA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiO5B,CAAC;AAEH,eAAO,MAAM,SAAS,QAGpB,CAAC"}
package/dist/themes/theme.css.js CHANGED
@@ -8,6 +8,17 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
8
8
  import { createThemeContract, style } from '@vanilla-extract/css';
9
9
  import { buildColourGamut } from "./makeTheme.js";
10
10
  const colours = {
11
+ black: {
12
+ '900': '',
13
+ '800': '',
14
+ '700': '',
15
+ '600': '',
16
+ '500': '',
17
+ '400': '',
18
+ '300': '',
19
+ '200': '',
20
+ '100': ''
21
+ },
11
22
  gray: {
12
23
  '900': '',
13
24
  '800': '',
@@ -111,6 +122,15 @@ export const themeContractVars = createThemeContract({
111
122
  foreground: '',
112
123
  border: ''
113
124
  },
125
+ brand: {
126
+ background: {
127
+ standard: '',
128
+ mild: '',
129
+ strong: ''
130
+ },
131
+ foreground: '',
132
+ border: ''
133
+ },
114
134
  secondary: {
115
135
  background: {
116
136
  standard: '',
@@ -245,6 +265,7 @@ export const themeContractVars = createThemeContract({
245
265
  },
246
266
  colour: {
247
267
  primary: '',
268
+ brand: '',
248
269
  secondary: '',
249
270
  shine: '',
250
271
  link: '',
package/dist/themes/tokens.d.ts CHANGED
@@ -13,13 +13,14 @@ interface ColourIntensityMap extends VanillaTokens {
13
13
  strong: string;
14
14
  }
15
15
  export type ColourMap = Record<string, ColourValue>;
16
+ type ColourBlacks = 'black900' | 'black800' | 'black700' | 'black600' | 'black500' | 'black400' | 'black300' | 'black200' | 'black100';
16
17
  type ColourReds = 'red900' | 'red800' | 'red700' | 'red600' | 'red500' | 'red400' | 'red300' | 'red200' | 'red100';
17
18
  type ColourGrays = 'gray900' | 'gray800' | 'gray700' | 'gray600' | 'gray500' | 'gray400' | 'gray300' | 'gray200' | 'gray100';
18
19
  type ColourGreens = 'green900' | 'green800' | 'green700' | 'green600' | 'green500' | 'green400' | 'green300' | 'green200' | 'green100';
19
20
  type ColourBlues = 'blue900' | 'blue800' | 'blue700' | 'blue600' | 'blue500' | 'blue400' | 'blue300' | 'blue200' | 'blue100';
20
21
  type ColourYellows = 'yellow900' | 'yellow800' | 'yellow700' | 'yellow600' | 'yellow500' | 'yellow400' | 'yellow300' | 'yellow200' | 'yellow100';
21
- export type ColourGamut = ColourGrays | ColourBlues | ColourGreens | ColourReds | ColourYellows;
22
- type Intent = 'primary' | 'secondary' | 'shine' | 'neutral' | 'danger' | 'warning' | 'success' | 'information';
22
+ export type ColourGamut = ColourBlacks | ColourGrays | ColourBlues | ColourGreens | ColourReds | ColourYellows;
23
+ type Intent = 'primary' | 'brand' | 'secondary' | 'shine' | 'neutral' | 'danger' | 'warning' | 'success' | 'information';
23
24
  type BaseColours = 'white';
24
25
  export type BreakPoints = Record<DeviceSize, string>;
25
26
  export interface Tokens extends VanillaTokens {
package/dist/themes/tokens.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../lib/themes/tokens.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../lib/themes/tokens.ts"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@autoguru/overdrive",
3
- "version": "4.31.0",
3
+ "version": "4.33.0",
4
4
  "description": "Overdrive is a product component library, and design system for AutoGuru.",
5
5
  "types": "dist/index.d.ts",
6
6
  "main": "dist/index.js",
@@ -42,32 +42,36 @@
42
42
  "@autoguru/tsconfig": "1.0.80",
43
43
  "@autoguru/utilities": "1.1.1",
44
44
  "@popperjs/core": "2.11.6",
45
+ "@react-stately/toggle": "3.7.7",
45
46
  "@types/react": "^18.0.17",
46
47
  "@types/react-dom": "^18.0.6",
47
- "@vanilla-extract/dynamic": "^2.0.3",
48
+ "@vanilla-extract/dynamic": "^2.1.2",
48
49
  "clsx": "1.2.1",
49
50
  "colord": "2.9.3",
50
- "csstype": "3.1.1",
51
+ "csstype": "^3.1.3",
51
52
  "deepmerge": "^4.2.2",
52
53
  "eslint-plugin-jest": "26.9.0",
53
54
  "intersection-observer": "^0.12.2",
54
55
  "react": "^18.2.0",
56
+ "react-aria": "3.34.2",
55
57
  "react-dom": "^18.2.0",
56
58
  "react-focus-lock": "2.9.4",
57
59
  "react-intersection-observer": "^9.4.3",
58
60
  "react-keyed-flatten-children": "1.3.0",
59
61
  "react-swipeable": "^7.0.0",
62
+ "react-types": "0.1.0",
60
63
  "webpack": "5.77.0"
61
64
  },
62
65
  "peerDependencies": {
63
66
  "@autoguru/icons": "^1.7.28",
64
67
  "@autoguru/utilities": "^1.0.98",
65
68
  "@popperjs/core": "^2.10.2",
66
- "@vanilla-extract/dynamic": "^2.0.3",
69
+ "@vanilla-extract/dynamic": "^2.1.2",
67
70
  "clsx": "^1.1.1",
68
71
  "colord": "^2.0.1",
69
- "csstype": "^3.0.7",
72
+ "csstype": "^3.1.3",
70
73
  "react": ">=16.8",
74
+ "react-aria": "3.34.2",
71
75
  "react-dom": ">=16.8",
72
76
  "react-focus-lock": "^2.5.0",
73
77
  "react-intersection-observer": ">=9.4.3",