@spark-ui/theme-utils 2.0.1 → 2.1.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 (5) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/index.js +1 -1
  3. package/dist/index.mjs +5 -5
  4. package/dist/types.d.ts +100 -20
  5. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -3,6 +3,12 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [2.1.0](https://github.com/adevinta/spark/compare/@spark-ui/theme-utils@2.0.1...@spark-ui/theme-utils@2.1.0) (2023-02-21)
7
+
8
+ ### Features
9
+
10
+ - **theme-utils:** updated token structure for colors to match spark specs ([d082458](https://github.com/adevinta/spark/commit/d0824589ff61f30a703cc3a590279a739291fb72)), closes [#251](https://github.com/adevinta/spark/issues/251)
11
+
6
12
  ## [2.0.1](https://github.com/adevinta/spark/compare/@spark-ui/theme-utils@2.0.0...@spark-ui/theme-utils@2.0.1) (2023-02-17)
7
13
 
8
14
  **Note:** Version bump only for package @spark-ui/theme-utils
package/dist/index.js CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("deepmerge"),e={screens:{sm:"640px",md:"768px",lg:"1024px",xl:"1280px","2xl":"1536px"},borderWidth:{none:"0",xs:"0.1rem",s:"0.2rem",m:"0.4rem"},colors:{transparent:"transparent",bg:{primary:"#f28133",primaryAccent:"#ad4c07",primarySubtle:"#fba56c",secondary:"#3481f2",secondaryAccent:"#074aad",secondarySubtle:"#4c93f7",body:"#fff"},bd:{primary:"#f28133",secondary:"#3481f2"},fg:{default:"#334155",accent:"#1161d7",cta:"#000",ctaInverse:"#fff"}},fontFamily:{openSans:'ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"'},fontSize:{xs:"1rem",s:"1.2rem",m:"1.4rem",l:"1.6rem",xl:"1.8rem","2xl":"2rem","3xl":"2.4rem"},fontWeight:{regular:400,semibold:600,bold:700},lineHeight:{xs:"1.4rem",s:"1.7rem",m:"1.9rem",l:"2.2rem",xl:"2.4rem","2xl":"2.6rem","3xl":"2.8rem"},width:{pageMin:"320px",pageMax:"1066px"},borderRadius:{none:"0",xs:"0.4rem",s:"0.8rem",m:"1.6rem",l:"2.4rem",full:"100%"},boxShadow:{none:"none",normal:"0 -1px 4px 0 rgba(26, 26, 26, 0.08), 0 4px 8px 0 rgba(26, 26, 26, 0.12)",highlighted:"0 -1px 8px 0 rgba(26, 26, 26, 0.12), 0 4px 8px 0 rgba(0, 0, 0, 0.14)"},spacing:{auto:"auto",none:"0",xs:"0.4rem",s:"0.8rem",m:"1.6rem",l:"2.4rem",xl:"3.2rem",xxl:"4rem"},zIndex:{hide:-1,base:0,raised:1,dropdown:1e3,sticky:1100,overlay:1300,modal:1400,popover:1500,skipLink:1600,toast:1700,tooltip:1800}};exports.createTheme=function(r={}){return o(e,r)},exports.defaultTheme=e;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const F=require("deepmerge"),e={screens:{sm:"640px",md:"768px",lg:"1024px",xl:"1280px","2xl":"1536px"},borderWidth:{none:"0",xs:"0.1rem",s:"0.2rem",m:"0.4rem"},colors:{primary:"#EC5A13",onPrimary:"#FFFFFF",primaryContainer:"#FDECE8",onPrimaryContainer:"#89380F",primaryHovered:"#B84A14",primaryDisabled:"#F0F5FA",primaryFocused:"#EC5A13",primaryContainerHovered:"##FBDFD1",primaryContainerDisabled:"##F0F5FA",primaryContainerFocused:"#FDECE8",secondary:"#06233D",onSecondary:"#FFFFFF",secondaryContainer:"#F0F5FA",onSecondaryContainer:"#06233D",secondaryHovered:"#010509",secondaryDisabled:"#F0F5FA",secondaryFocused:"#06233D",secondaryContainerHovered:"#EDDEE5",secondaryContainerDisabled:"#F0F5FA",secondaryContainerFocused:"#F0F5FA",primaryVariant:"#B84A14",onPrimaryVariant:"#FFFFFF",primaryVariantHovered:"#89380F",primaryVariantDisabled:"#F0F5FA",primaryVariantFocused:"#B84A14",secondaryVariant:"#4E6579",onSecondaryVariant:"#FFFFFF",secondaryVariantHovered:"#3D4D5C",secondaryVariantDisabled:"#F0F5FA",secondaryVariantFocused:"#4E6579",success:"#4E9850",onSuccess:"#FFFFFF",successContainer:"#EDF5EE",onSuccessContainer:"#2F5B30",successHovered:"#3E7A40",successDisabled:"#F0F5FA",successFocused:"#4E9850",successContainerHovered:"#DCEADC",successContainerDisabled:"#F0F5FA",successContainerFocused:"#EDF5EE",alert:"#FFAA00",onAlert:"#14191F",alertContainer:"#FFF6E5",onAlertContainer:"#996600",alertHovered:"#CC8800",alertDisabled:"#F0F5FA",alertFocused:"#FFAA00",alertContainerHovered:"#FFEECC",alertContainerDisabled:"#F0F5FA",alertContainerFocused:"#FFF6E5",error:"#D93426",onError:"#FFFFFF",errorContainer:"#FBECEB",onErrorContainer:"#822017",errorHovered:"#AD291F",errorDisabled:"#F0F5FA",errorFocused:"#D93426",errorContainerHovered:"#F7D7D4",errorContainerDisabled:"#F0F5FA",errorContainerFocused:"#FBECEB",info:"#1388EC",onInfo:"#FFFFFF",infoContainer:"#E7F3FD",onInfoContainer:"#0B518E",infoHovered:"#0F6CBD",infoDisabled:"#F0F5FA",infoFocused:"#1388EC",infoContainerHovered:"#CFE6FB",infoContainerDisabled:"#F0F5FA",infoContainerFocused:"#E7F3FD",neutral:"#627C93",onNeutral:"#FFFFFF",neutralContainer:"#F0F5FA",onNeutralContainer:"#3D4D5C",neutralHovered:"#4E6579",neutralDisabled:"#F0F5FA",neutralFocused:"#627C93",neutralContainerHovered:"#DAE6F1",neutralContainerDisabled:"#F0F5FA",neutralContainerFocused:"#F0F5FA",background:"#FFFFFF",onBackground:"#06233D",backgroundHovered:"#F7FAFD",backgroundDisabled:"#F0F5FA",backgroundFocused:"#FFFFFF",surface:"#FFFFFF",onSurface:"#06233D",surfaceHovered:"#F7FAFD",surfaceDisabled:"#F0F5FA",surfaceFocused:"#FFFFFF",surfaceInverse:"#14191F",onSurfaceInverse:"#FFFFFF",surfaceInverseHovered:"#14191F",surfaceInverseDisabled:"#F0F5FA",surfaceInverseFocused:"#14191F",outline:"#A3B4C2",overlay:"#2B3640"},fontFamily:{openSans:'ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"'},fontSize:{xs:"1rem",s:"1.2rem",m:"1.4rem",l:"1.6rem",xl:"1.8rem","2xl":"2rem","3xl":"2.4rem"},fontWeight:{regular:400,semibold:600,bold:700},lineHeight:{xs:"1.4rem",s:"1.7rem",m:"1.9rem",l:"2.2rem",xl:"2.4rem","2xl":"2.6rem","3xl":"2.8rem"},width:{pageMin:"320px",pageMax:"1066px"},borderRadius:{none:"0",xs:"0.4rem",s:"0.8rem",m:"1.6rem",l:"2.4rem",full:"100%"},boxShadow:{none:"none",normal:"0 -1px 4px 0 rgba(26, 26, 26, 0.08), 0 4px 8px 0 rgba(26, 26, 26, 0.12)",highlighted:"0 -1px 8px 0 rgba(26, 26, 26, 0.12), 0 4px 8px 0 rgba(0, 0, 0, 0.14)"},spacing:{auto:"auto",none:"0",xs:"0.4rem",s:"0.8rem",m:"1.6rem",l:"2.4rem",xl:"3.2rem",xxl:"4rem"},zIndex:{hide:-1,base:0,raised:1,dropdown:1e3,sticky:1100,overlay:1300,modal:1400,popover:1500,skipLink:1600,toast:1700,tooltip:1800}};exports.createTheme=function(r={}){return F(e,r)},exports.defaultTheme=e;
package/dist/index.mjs CHANGED
@@ -1,9 +1,9 @@
1
1
  import r from "deepmerge";
2
- const o = { screens: { sm: "640px", md: "768px", lg: "1024px", xl: "1280px", "2xl": "1536px" }, borderWidth: { none: "0", xs: "0.1rem", s: "0.2rem", m: "0.4rem" }, colors: { transparent: "transparent", bg: { primary: "#f28133", primaryAccent: "#ad4c07", primarySubtle: "#fba56c", secondary: "#3481f2", secondaryAccent: "#074aad", secondarySubtle: "#4c93f7", body: "#fff" }, bd: { primary: "#f28133", secondary: "#3481f2" }, fg: { default: "#334155", accent: "#1161d7", cta: "#000", ctaInverse: "#fff" } }, fontFamily: { openSans: 'ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"' }, fontSize: { xs: "1rem", s: "1.2rem", m: "1.4rem", l: "1.6rem", xl: "1.8rem", "2xl": "2rem", "3xl": "2.4rem" }, fontWeight: { regular: 400, semibold: 600, bold: 700 }, lineHeight: { xs: "1.4rem", s: "1.7rem", m: "1.9rem", l: "2.2rem", xl: "2.4rem", "2xl": "2.6rem", "3xl": "2.8rem" }, width: { pageMin: "320px", pageMax: "1066px" }, borderRadius: { none: "0", xs: "0.4rem", s: "0.8rem", m: "1.6rem", l: "2.4rem", full: "100%" }, boxShadow: { none: "none", normal: "0 -1px 4px 0 rgba(26, 26, 26, 0.08), 0 4px 8px 0 rgba(26, 26, 26, 0.12)", highlighted: "0 -1px 8px 0 rgba(26, 26, 26, 0.12), 0 4px 8px 0 rgba(0, 0, 0, 0.14)" }, spacing: { auto: "auto", none: "0", xs: "0.4rem", s: "0.8rem", m: "1.6rem", l: "2.4rem", xl: "3.2rem", xxl: "4rem" }, zIndex: { hide: -1, base: 0, raised: 1, dropdown: 1e3, sticky: 1100, overlay: 1300, modal: 1400, popover: 1500, skipLink: 1600, toast: 1700, tooltip: 1800 } };
3
- function a(e = {}) {
4
- return r(o, e);
2
+ const F = { screens: { sm: "640px", md: "768px", lg: "1024px", xl: "1280px", "2xl": "1536px" }, borderWidth: { none: "0", xs: "0.1rem", s: "0.2rem", m: "0.4rem" }, colors: { primary: "#EC5A13", onPrimary: "#FFFFFF", primaryContainer: "#FDECE8", onPrimaryContainer: "#89380F", primaryHovered: "#B84A14", primaryDisabled: "#F0F5FA", primaryFocused: "#EC5A13", primaryContainerHovered: "##FBDFD1", primaryContainerDisabled: "##F0F5FA", primaryContainerFocused: "#FDECE8", secondary: "#06233D", onSecondary: "#FFFFFF", secondaryContainer: "#F0F5FA", onSecondaryContainer: "#06233D", secondaryHovered: "#010509", secondaryDisabled: "#F0F5FA", secondaryFocused: "#06233D", secondaryContainerHovered: "#EDDEE5", secondaryContainerDisabled: "#F0F5FA", secondaryContainerFocused: "#F0F5FA", primaryVariant: "#B84A14", onPrimaryVariant: "#FFFFFF", primaryVariantHovered: "#89380F", primaryVariantDisabled: "#F0F5FA", primaryVariantFocused: "#B84A14", secondaryVariant: "#4E6579", onSecondaryVariant: "#FFFFFF", secondaryVariantHovered: "#3D4D5C", secondaryVariantDisabled: "#F0F5FA", secondaryVariantFocused: "#4E6579", success: "#4E9850", onSuccess: "#FFFFFF", successContainer: "#EDF5EE", onSuccessContainer: "#2F5B30", successHovered: "#3E7A40", successDisabled: "#F0F5FA", successFocused: "#4E9850", successContainerHovered: "#DCEADC", successContainerDisabled: "#F0F5FA", successContainerFocused: "#EDF5EE", alert: "#FFAA00", onAlert: "#14191F", alertContainer: "#FFF6E5", onAlertContainer: "#996600", alertHovered: "#CC8800", alertDisabled: "#F0F5FA", alertFocused: "#FFAA00", alertContainerHovered: "#FFEECC", alertContainerDisabled: "#F0F5FA", alertContainerFocused: "#FFF6E5", error: "#D93426", onError: "#FFFFFF", errorContainer: "#FBECEB", onErrorContainer: "#822017", errorHovered: "#AD291F", errorDisabled: "#F0F5FA", errorFocused: "#D93426", errorContainerHovered: "#F7D7D4", errorContainerDisabled: "#F0F5FA", errorContainerFocused: "#FBECEB", info: "#1388EC", onInfo: "#FFFFFF", infoContainer: "#E7F3FD", onInfoContainer: "#0B518E", infoHovered: "#0F6CBD", infoDisabled: "#F0F5FA", infoFocused: "#1388EC", infoContainerHovered: "#CFE6FB", infoContainerDisabled: "#F0F5FA", infoContainerFocused: "#E7F3FD", neutral: "#627C93", onNeutral: "#FFFFFF", neutralContainer: "#F0F5FA", onNeutralContainer: "#3D4D5C", neutralHovered: "#4E6579", neutralDisabled: "#F0F5FA", neutralFocused: "#627C93", neutralContainerHovered: "#DAE6F1", neutralContainerDisabled: "#F0F5FA", neutralContainerFocused: "#F0F5FA", background: "#FFFFFF", onBackground: "#06233D", backgroundHovered: "#F7FAFD", backgroundDisabled: "#F0F5FA", backgroundFocused: "#FFFFFF", surface: "#FFFFFF", onSurface: "#06233D", surfaceHovered: "#F7FAFD", surfaceDisabled: "#F0F5FA", surfaceFocused: "#FFFFFF", surfaceInverse: "#14191F", onSurfaceInverse: "#FFFFFF", surfaceInverseHovered: "#14191F", surfaceInverseDisabled: "#F0F5FA", surfaceInverseFocused: "#14191F", outline: "#A3B4C2", overlay: "#2B3640" }, fontFamily: { openSans: 'ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"' }, fontSize: { xs: "1rem", s: "1.2rem", m: "1.4rem", l: "1.6rem", xl: "1.8rem", "2xl": "2rem", "3xl": "2.4rem" }, fontWeight: { regular: 400, semibold: 600, bold: 700 }, lineHeight: { xs: "1.4rem", s: "1.7rem", m: "1.9rem", l: "2.2rem", xl: "2.4rem", "2xl": "2.6rem", "3xl": "2.8rem" }, width: { pageMin: "320px", pageMax: "1066px" }, borderRadius: { none: "0", xs: "0.4rem", s: "0.8rem", m: "1.6rem", l: "2.4rem", full: "100%" }, boxShadow: { none: "none", normal: "0 -1px 4px 0 rgba(26, 26, 26, 0.08), 0 4px 8px 0 rgba(26, 26, 26, 0.12)", highlighted: "0 -1px 8px 0 rgba(26, 26, 26, 0.12), 0 4px 8px 0 rgba(0, 0, 0, 0.14)" }, spacing: { auto: "auto", none: "0", xs: "0.4rem", s: "0.8rem", m: "1.6rem", l: "2.4rem", xl: "3.2rem", xxl: "4rem" }, zIndex: { hide: -1, base: 0, raised: 1, dropdown: 1e3, sticky: 1100, overlay: 1300, modal: 1400, popover: 1500, skipLink: 1600, toast: 1700, tooltip: 1800 } };
3
+ function n(e = {}) {
4
+ return r(F, e);
5
5
  }
6
6
  export {
7
- a as createTheme,
8
- o as defaultTheme
7
+ n as createTheme,
8
+ F as defaultTheme
9
9
  };
package/dist/types.d.ts CHANGED
@@ -12,27 +12,107 @@ export interface Theme {
12
12
  s: string;
13
13
  m: string;
14
14
  };
15
+ /**
16
+ * Spark color specifications: https://zeroheight.com/1186e1705/p/0879a9-colors/b/27d7a3
17
+ */
15
18
  colors: {
16
- transparent: string;
17
- bg: {
18
- body: string;
19
- primary: string;
20
- primaryAccent: string;
21
- primarySubtle: string;
22
- secondary: string;
23
- secondaryAccent: string;
24
- secondarySubtle: string;
25
- };
26
- fg: {
27
- default: string;
28
- accent: string;
29
- cta: string;
30
- ctaInverse: string;
31
- };
32
- bd: {
33
- primary: string;
34
- secondary: string;
35
- };
19
+ primary: string;
20
+ onPrimary: string;
21
+ primaryHovered: string;
22
+ primaryDisabled: string;
23
+ primaryFocused: string;
24
+ primaryContainer: string;
25
+ onPrimaryContainer: string;
26
+ primaryContainerHovered: string;
27
+ primaryContainerDisabled: string;
28
+ primaryContainerFocused: string;
29
+ secondary: string;
30
+ onSecondary: string;
31
+ secondaryHovered: string;
32
+ secondaryDisabled: string;
33
+ secondaryFocused: string;
34
+ secondaryContainer: string;
35
+ onSecondaryContainer: string;
36
+ secondaryContainerHovered: string;
37
+ secondaryContainerDisabled: string;
38
+ secondaryContainerFocused: string;
39
+ primaryVariant: string;
40
+ onPrimaryVariant: string;
41
+ primaryVariantHovered: string;
42
+ primaryVariantDisabled: string;
43
+ primaryVariantFocused: string;
44
+ secondaryVariant: string;
45
+ onSecondaryVariant: string;
46
+ secondaryVariantHovered: string;
47
+ secondaryVariantDisabled: string;
48
+ secondaryVariantFocused: string;
49
+ success: string;
50
+ onSuccess: string;
51
+ successHovered: string;
52
+ successDisabled: string;
53
+ successFocused: string;
54
+ successContainer: string;
55
+ onSuccessContainer: string;
56
+ successContainerHovered: string;
57
+ successContainerDisabled: string;
58
+ successContainerFocused: string;
59
+ alert: string;
60
+ onAlert: string;
61
+ alertHovered: string;
62
+ alertDisabled: string;
63
+ alertFocused: string;
64
+ alertContainer: string;
65
+ onAlertContainer: string;
66
+ alertContainerHovered: string;
67
+ alertContainerDisabled: string;
68
+ alertContainerFocused: string;
69
+ error: string;
70
+ onError: string;
71
+ errorHovered: string;
72
+ errorDisabled: string;
73
+ errorFocused: string;
74
+ errorContainer: string;
75
+ onErrorContainer: string;
76
+ errorContainerHovered: string;
77
+ errorContainerDisabled: string;
78
+ errorContainerFocused: string;
79
+ info: string;
80
+ onInfo: string;
81
+ infoHovered: string;
82
+ infoDisabled: string;
83
+ infoFocused: string;
84
+ infoContainer: string;
85
+ onInfoContainer: string;
86
+ infoContainerHovered: string;
87
+ infoContainerDisabled: string;
88
+ infoContainerFocused: string;
89
+ neutral: string;
90
+ onNeutral: string;
91
+ neutralHovered: string;
92
+ neutralDisabled: string;
93
+ neutralFocused: string;
94
+ neutralContainer: string;
95
+ onNeutralContainer: string;
96
+ neutralContainerHovered: string;
97
+ neutralContainerDisabled: string;
98
+ neutralContainerFocused: string;
99
+ background: string;
100
+ onBackground: string;
101
+ backgroundHovered: string;
102
+ backgroundDisabled: string;
103
+ backgroundFocused: string;
104
+ surface: string;
105
+ onSurface: string;
106
+ surfaceHovered: string;
107
+ surfaceDisabled: string;
108
+ surfaceFocused: string;
109
+ surfaceInverse: string;
110
+ onSurfaceInverse: string;
111
+ surfaceInverseHovered: string;
112
+ surfaceInverseDisabled: string;
113
+ surfaceInverseFocused: string;
114
+ outline: string;
115
+ overlay: string;
36
116
  };
37
117
  fontFamily: {
38
118
  openSans: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spark-ui/theme-utils",
3
- "version": "2.0.1",
3
+ "version": "2.1.0",
4
4
  "description": "package for managing Spark theme configuration",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -15,5 +15,5 @@
15
15
  "deepmerge": "4.3.0",
16
16
  "type-fest": "3.5.6"
17
17
  },
18
- "gitHead": "51c01c9355b193d22f17eb7cc3f84aebbd2e3eeb"
18
+ "gitHead": "d3f51d8aa786c8bf1dbf96970c43e8cb0f5aadc5"
19
19
  }