components-test-pb 0.2.1 → 0.2.3

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 (7) hide show
  1. package/dist/components/Button/src/useButtonStyles.styles.js +27 -5
  2. package/dist/theme/defaultTheme.js +5 -0
  3. package/dist/theme/types.d.ts +4 -0
  4. package/package.json +1 -1
  5. package/src/components/Button/src/useButtonStyles.styles.ts +25 -3
  6. package/src/theme/defaultTheme.ts +6 -0
  7. package/src/theme/types.ts +6 -0
package/dist/components/Button/src/useButtonStyles.styles.js CHANGED
@@ -43,20 +43,31 @@ const useVariationStyles = makeStyles({
43
43
  primary: {
44
44
  backgroundColor: tokens.colorBrandBackground,
45
45
  ...shorthands.borderColor('transparent'),
46
- color: tokens.colorBrandForeground,
46
+ color: tokens.colorNeutralForegroundOnBrand,
47
47
  ':hover': {
48
48
  backgroundColor: tokens.colorBrandBackgroundHover,
49
49
  ...shorthands.borderColor('transparent'),
50
- color: tokens.colorBrandForeground,
50
+ color: tokens.colorNeutralForegroundOnBrand,
51
51
  },
52
52
  ':hover:active,:active:focus-visible': {
53
53
  backgroundColor: tokens.colorBrandBackgroundPressed,
54
54
  ...shorthands.borderColor('transparent'),
55
- color: tokens.colorBrandForeground,
55
+ color: tokens.colorNeutralForegroundOnBrand,
56
56
  }
57
57
  },
58
58
  secondary: {},
59
- ghost: {},
59
+ ghost: {
60
+ backgroundColor: tokens.colorTransparentBackground,
61
+ ...shorthands.borderColor('transparent'),
62
+ ':hover': {
63
+ backgroundColor: tokens.colorTransparentBackgroundHover,
64
+ ...shorthands.borderColor(tokens.colorNeutralForeground2)
65
+ },
66
+ ':hover:active,:active:focus-visible': {
67
+ backgroundColor: tokens.colorTransparentBackgroundPressed,
68
+ ...shorthands.borderColor('transparent')
69
+ }
70
+ },
60
71
  square: { borderRadius: 0 },
61
72
  rounded: {},
62
73
  circular: { borderRadius: '9999px' },
@@ -106,7 +117,18 @@ const useDisabledStyles = makeStyles({
106
117
  }
107
118
  },
108
119
  secondary: {},
109
- ghost: {}
120
+ ghost: {
121
+ backgroundColor: 'transparent',
122
+ ...shorthands.borderColor('transparent'),
123
+ ':hover': {
124
+ backgroundColor: 'transparent',
125
+ ...shorthands.borderColor('transparent')
126
+ },
127
+ ':hover:active,:active:focus-visible': {
128
+ backgroundColor: 'transparent',
129
+ ...shorthands.borderColor('transparent')
130
+ }
131
+ }
110
132
  });
111
133
  export const useButtonStyles = (state) => {
112
134
  const resetStyles = useResetStyles();
package/dist/theme/defaultTheme.js CHANGED
@@ -7,6 +7,7 @@ export const defaultTheme = {
7
7
  colorBrandForeground: '#115ea3',
8
8
  colorBrandForegroundHover: '#0f548c',
9
9
  colorBrandForegroundPressed: '#0c3b5e',
10
+ colorNeutralForegroundOnBrand: '#ffffff',
10
11
  colorBrandStroke: '#0f6cbd',
11
12
  // Colors — Neutral Foreground
12
13
  colorNeutralForeground1: '#242424',
@@ -31,6 +32,10 @@ export const defaultTheme = {
31
32
  colorNeutralStroke1Pressed: '#b3b3b3',
32
33
  colorNeutralStroke2: '#e0e0e0',
33
34
  colorNeutralStrokeDisabled: '#e0e0e0',
35
+ // Colors — Transparent
36
+ colorTransparentBackground: 'transparent',
37
+ colorTransparentBackgroundHover: 'transparent',
38
+ colorTransparentBackgroundPressed: 'transparent',
34
39
  // Colors — Subtle
35
40
  colorSubtleBackground: 'transparent',
36
41
  colorSubtleBackgroundHover: '#f5f5f5',
package/dist/theme/types.d.ts CHANGED
@@ -6,6 +6,7 @@ export interface Theme {
6
6
  colorBrandForeground: string;
7
7
  colorBrandForegroundHover: string;
8
8
  colorBrandForegroundPressed: string;
9
+ colorNeutralForegroundOnBrand: string;
9
10
  colorBrandStroke: string;
10
11
  colorNeutralForeground1: string;
11
12
  colorNeutralForeground1Hover: string;
@@ -27,6 +28,9 @@ export interface Theme {
27
28
  colorNeutralStroke1Pressed: string;
28
29
  colorNeutralStroke2: string;
29
30
  colorNeutralStrokeDisabled: string;
31
+ colorTransparentBackground: string;
32
+ colorTransparentBackgroundHover: string;
33
+ colorTransparentBackgroundPressed: string;
30
34
  colorSubtleBackground: string;
31
35
  colorSubtleBackgroundHover: string;
32
36
  colorSubtleBackgroundPressed: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "components-test-pb",
3
- "version": "0.2.1",
3
+ "version": "0.2.3",
4
4
  "description": "",
5
5
  "main": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",
package/src/components/Button/src/useButtonStyles.styles.ts CHANGED
@@ -58,23 +58,34 @@ const useVariationStyles = makeStyles({
58
58
  primary: {
59
59
  backgroundColor: tokens.colorBrandBackground,
60
60
  ...shorthands.borderColor('transparent'),
61
- color: tokens.colorBrandForeground,
61
+ color: tokens.colorNeutralForegroundOnBrand,
62
62
 
63
63
  ':hover': {
64
64
  backgroundColor: tokens.colorBrandBackgroundHover,
65
65
  ...shorthands.borderColor('transparent'),
66
- color: tokens.colorBrandForeground,
66
+ color: tokens.colorNeutralForegroundOnBrand,
67
67
  },
68
68
 
69
69
  ':hover:active,:active:focus-visible': {
70
70
  backgroundColor: tokens.colorBrandBackgroundPressed,
71
71
  ...shorthands.borderColor('transparent'),
72
- color: tokens.colorBrandForeground,
72
+ color: tokens.colorNeutralForegroundOnBrand,
73
73
  }
74
74
  },
75
75
  secondary: {},
76
76
  ghost: {
77
+ backgroundColor: tokens.colorTransparentBackground,
78
+ ...shorthands.borderColor('transparent'),
79
+
80
+ ':hover': {
81
+ backgroundColor: tokens.colorTransparentBackgroundHover,
82
+ ...shorthands.borderColor(tokens.colorNeutralForeground2)
83
+ },
77
84
 
85
+ ':hover:active,:active:focus-visible': {
86
+ backgroundColor: tokens.colorTransparentBackgroundPressed,
87
+ ...shorthands.borderColor('transparent')
88
+ }
78
89
  },
79
90
 
80
91
  square: { borderRadius: 0 },
@@ -137,7 +148,18 @@ const useDisabledStyles = makeStyles({
137
148
  },
138
149
  secondary: {},
139
150
  ghost: {
151
+ backgroundColor: 'transparent',
152
+ ...shorthands.borderColor('transparent'),
140
153
 
154
+ ':hover': {
155
+ backgroundColor: 'transparent',
156
+ ...shorthands.borderColor('transparent')
157
+ },
158
+
159
+ ':hover:active,:active:focus-visible': {
160
+ backgroundColor: 'transparent',
161
+ ...shorthands.borderColor('transparent')
162
+ }
141
163
  }
142
164
  });
143
165
 
package/src/theme/defaultTheme.ts CHANGED
@@ -9,6 +9,7 @@ export const defaultTheme: Theme = {
9
9
  colorBrandForeground: '#115ea3',
10
10
  colorBrandForegroundHover: '#0f548c',
11
11
  colorBrandForegroundPressed: '#0c3b5e',
12
+ colorNeutralForegroundOnBrand: '#ffffff',
12
13
  colorBrandStroke: '#0f6cbd',
13
14
 
14
15
  // Colors — Neutral Foreground
@@ -37,6 +38,11 @@ export const defaultTheme: Theme = {
37
38
  colorNeutralStroke2: '#e0e0e0',
38
39
  colorNeutralStrokeDisabled: '#e0e0e0',
39
40
 
41
+ // Colors — Transparent
42
+ colorTransparentBackground: 'transparent',
43
+ colorTransparentBackgroundHover: 'transparent',
44
+ colorTransparentBackgroundPressed: 'transparent',
45
+
40
46
  // Colors — Subtle
41
47
  colorSubtleBackground: 'transparent',
42
48
  colorSubtleBackgroundHover: '#f5f5f5',
package/src/theme/types.ts CHANGED
@@ -7,6 +7,7 @@ export interface Theme {
7
7
  colorBrandForeground: string;
8
8
  colorBrandForegroundHover: string;
9
9
  colorBrandForegroundPressed: string;
10
+ colorNeutralForegroundOnBrand: string;
10
11
  colorBrandStroke: string;
11
12
 
12
13
  // Colors — Neutral Foreground
@@ -35,6 +36,11 @@ export interface Theme {
35
36
  colorNeutralStroke2: string;
36
37
  colorNeutralStrokeDisabled: string;
37
38
 
39
+ // Colors — Transparent
40
+ colorTransparentBackground: string;
41
+ colorTransparentBackgroundHover: string;
42
+ colorTransparentBackgroundPressed: string;
43
+
38
44
  // Colors — Subtle
39
45
  colorSubtleBackground: string;
40
46
  colorSubtleBackgroundHover: string;