components-test-pb 0.1.9 → 0.2.1

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 (3) hide show
  1. package/dist/components/Button/src/useButtonStyles.styles.js +58 -6
  2. package/package.json +1 -1
  3. package/src/components/Button/src/useButtonStyles.styles.ts +55 -7
package/dist/components/Button/src/useButtonStyles.styles.js CHANGED
@@ -1,4 +1,4 @@
1
- import { makeResetStyles, makeStyles, mergeClasses } from 'css-engine-test-pb';
1
+ import { makeResetStyles, makeStyles, mergeClasses, shorthands } from 'css-engine-test-pb';
2
2
  import { tokens } from '../../../theme';
3
3
  export const buttonClassNames = {
4
4
  root: 'c-button'
@@ -40,19 +40,71 @@ const useResetStyles = makeResetStyles({
40
40
  transitionTimingFunction: tokens.curveEasyEase
41
41
  });
42
42
  const useVariationStyles = makeStyles({
43
- primary: {},
43
+ primary: {
44
+ backgroundColor: tokens.colorBrandBackground,
45
+ ...shorthands.borderColor('transparent'),
46
+ color: tokens.colorBrandForeground,
47
+ ':hover': {
48
+ backgroundColor: tokens.colorBrandBackgroundHover,
49
+ ...shorthands.borderColor('transparent'),
50
+ color: tokens.colorBrandForeground,
51
+ },
52
+ ':hover:active,:active:focus-visible': {
53
+ backgroundColor: tokens.colorBrandBackgroundPressed,
54
+ ...shorthands.borderColor('transparent'),
55
+ color: tokens.colorBrandForeground,
56
+ }
57
+ },
44
58
  secondary: {},
45
59
  ghost: {},
46
60
  square: { borderRadius: 0 },
47
61
  rounded: {},
48
62
  circular: { borderRadius: '9999px' },
49
- small: {},
63
+ small: {
64
+ minWidth: '64px',
65
+ padding: `3px ${tokens.spacingHorizontalS}`,
66
+ borderRadius: tokens.borderRadiusMedium,
67
+ fontSize: tokens.fontSizeBase200,
68
+ fontWeight: tokens.fontWeightRegular,
69
+ lineHeight: tokens.lineHeightBase200
70
+ },
50
71
  medium: {},
51
- large: {}
72
+ large: {
73
+ minWidth: '06px',
74
+ padding: `8px ${tokens.spacingHorizontalL}`,
75
+ borderRadius: tokens.borderRadiusMedium,
76
+ fontSize: tokens.fontSizeBase400,
77
+ fontWeight: tokens.fontWeightSemibold,
78
+ lineHeight: tokens.lineHeightBase400
79
+ }
52
80
  });
53
81
  const useDisabledStyles = makeStyles({
54
- base: {},
55
- primary: {},
82
+ base: {
83
+ backgroundColor: tokens.colorNeutralBackgroundDisabled,
84
+ ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),
85
+ color: tokens.colorNeutralForegroundDisabled,
86
+ ':hover': {
87
+ backgroundColor: tokens.colorNeutralBackgroundDisabled,
88
+ ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),
89
+ color: tokens.colorNeutralForegroundDisabled,
90
+ cursor: 'not-allowed'
91
+ },
92
+ ':hover:active,:active:focus-visible': {
93
+ backgroundColor: tokens.colorNeutralBackgroundDisabled,
94
+ ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),
95
+ color: tokens.colorNeutralForegroundDisabled,
96
+ cursor: 'not-allowed'
97
+ }
98
+ },
99
+ primary: {
100
+ ...shorthands.borderColor('transparent'),
101
+ ':hover': {
102
+ ...shorthands.borderColor('transparent')
103
+ },
104
+ ':hover:active,:active:focus-visible': {
105
+ ...shorthands.borderColor('transparent')
106
+ }
107
+ },
56
108
  secondary: {},
57
109
  ghost: {}
58
110
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "components-test-pb",
3
- "version": "0.1.9",
3
+ "version": "0.2.1",
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
@@ -1,4 +1,4 @@
1
- import { makeResetStyles, makeStyles, mergeClasses } from 'css-engine-test-pb';
1
+ import { makeResetStyles, makeStyles, mergeClasses, shorthands } from 'css-engine-test-pb';
2
2
  import { SlotClassNames } from '../../../utilities';
3
3
  import { ButtonSlots, ButtonState } from './Button.types';
4
4
  import { tokens } from '../../../theme';
@@ -56,11 +56,23 @@ const useResetStyles = makeResetStyles({
56
56
 
57
57
  const useVariationStyles = makeStyles({
58
58
  primary: {
59
-
60
- },
61
- secondary: {
62
-
59
+ backgroundColor: tokens.colorBrandBackground,
60
+ ...shorthands.borderColor('transparent'),
61
+ color: tokens.colorBrandForeground,
62
+
63
+ ':hover': {
64
+ backgroundColor: tokens.colorBrandBackgroundHover,
65
+ ...shorthands.borderColor('transparent'),
66
+ color: tokens.colorBrandForeground,
67
+ },
68
+
69
+ ':hover:active,:active:focus-visible': {
70
+ backgroundColor: tokens.colorBrandBackgroundPressed,
71
+ ...shorthands.borderColor('transparent'),
72
+ color: tokens.colorBrandForeground,
73
+ }
63
74
  },
75
+ secondary: {},
64
76
  ghost: {
65
77
 
66
78
  },
@@ -70,24 +82,60 @@ const useVariationStyles = makeStyles({
70
82
  circular: { borderRadius: '9999px' },
71
83
 
72
84
  small: {
85
+ minWidth: '64px',
86
+ padding: `3px ${tokens.spacingHorizontalS}`,
87
+ borderRadius: tokens.borderRadiusMedium,
73
88
 
89
+ fontSize: tokens.fontSizeBase200,
90
+ fontWeight: tokens.fontWeightRegular,
91
+ lineHeight: tokens.lineHeightBase200
74
92
  },
75
93
  medium: {},
76
94
  large: {
95
+ minWidth: '06px',
96
+ padding: `8px ${tokens.spacingHorizontalL}`,
97
+ borderRadius: tokens.borderRadiusMedium,
77
98
 
99
+ fontSize: tokens.fontSizeBase400,
100
+ fontWeight: tokens.fontWeightSemibold,
101
+ lineHeight: tokens.lineHeightBase400
78
102
  }
79
103
  });
80
104
 
81
105
  const useDisabledStyles = makeStyles({
82
106
  base: {
107
+ backgroundColor: tokens.colorNeutralBackgroundDisabled,
108
+ ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),
109
+ color: tokens.colorNeutralForegroundDisabled,
110
+
111
+ ':hover': {
112
+ backgroundColor: tokens.colorNeutralBackgroundDisabled,
113
+ ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),
114
+ color: tokens.colorNeutralForegroundDisabled,
83
115
 
116
+ cursor: 'not-allowed'
117
+ },
118
+
119
+ ':hover:active,:active:focus-visible': {
120
+ backgroundColor: tokens.colorNeutralBackgroundDisabled,
121
+ ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),
122
+ color: tokens.colorNeutralForegroundDisabled,
123
+
124
+ cursor: 'not-allowed'
125
+ }
84
126
  },
85
127
  primary: {
128
+ ...shorthands.borderColor('transparent'),
86
129
 
87
- },
88
- secondary: {
130
+ ':hover': {
131
+ ...shorthands.borderColor('transparent')
132
+ },
89
133
 
134
+ ':hover:active,:active:focus-visible': {
135
+ ...shorthands.borderColor('transparent')
136
+ }
90
137
  },
138
+ secondary: {},
91
139
  ghost: {
92
140
 
93
141
  }