@citygross/components_v2 0.0.24 → 0.0.26

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.
@@ -69,54 +69,67 @@
69
69
  .Button_buttonVariant_prio__fe4m9p5:active:not(:disabled) {
70
70
  background-color: #7A105E;
71
71
  }
72
- .Button_buttonFontSize_small__fe4m9p6 {
72
+ .Button_buttonVariant_dark__fe4m9p6 {
73
+ background-color: #333333;
74
+ color: #FFFFFF;
75
+ }
76
+ .Button_buttonVariant_dark__fe4m9p6:hover:not(:disabled) {
77
+ background-color: #4A4A4A;
78
+ }
79
+ .Button_buttonVariant_dark__fe4m9p6:active:not(:disabled) {
80
+ background-color: #333333;
81
+ }
82
+ .Button_buttonVariant_dark__fe4m9p6:disabled {
83
+ background-color: #B8B8B8;
84
+ }
85
+ .Button_buttonFontSize_small__fe4m9p7 {
73
86
  font-size: 13px;
74
87
  }
75
- .Button_buttonFontSize_default__fe4m9p7 {
88
+ .Button_buttonFontSize_default__fe4m9p8 {
76
89
  font-size: 15px;
77
90
  }
78
- .Button_buttonPadding_small__fe4m9p8 {
91
+ .Button_buttonPadding_small__fe4m9p9 {
79
92
  padding: 6px 8px;
80
93
  }
81
- .Button_buttonPadding_medium__fe4m9p9 {
94
+ .Button_buttonPadding_medium__fe4m9pa {
82
95
  padding: 8px 12px;
83
96
  }
84
- .Button_buttonPadding_large__fe4m9pa {
97
+ .Button_buttonPadding_large__fe4m9pb {
85
98
  padding: 12px 16px;
86
99
  }
87
- .Button_buttonPadding_icon__fe4m9pb {
100
+ .Button_buttonPadding_icon__fe4m9pc {
88
101
  height: 32px;
89
102
  width: 32px;
90
103
  display: grid;
91
104
  place-content: center;
92
105
  }
93
- .Button_buttonShadow_none__fe4m9pc {
106
+ .Button_buttonShadow_none__fe4m9pd {
94
107
  box-shadow: none;
95
108
  }
96
- .Button_buttonShadow_small__fe4m9pd {
109
+ .Button_buttonShadow_small__fe4m9pe {
97
110
  box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.15);
98
111
  }
99
- .Button_buttonShadow_default__fe4m9pe {
112
+ .Button_buttonShadow_default__fe4m9pf {
100
113
  box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.15);
101
114
  }
102
- .Button_buttonRadius_round__fe4m9pf {
115
+ .Button_buttonRadius_round__fe4m9pg {
103
116
  border-radius: 100px;
104
117
  box-shadow: none;
105
118
  }
106
- .Button_buttonRadius_default__fe4m9pg {
119
+ .Button_buttonRadius_default__fe4m9ph {
107
120
  border-radius: 4px;
108
121
  }
109
- .Button_button__fe4m9ph {
122
+ .Button_button__fe4m9pi {
110
123
  cursor: pointer;
111
124
  position: relative;
112
125
  }
113
- .Button_button__fe4m9ph[data-loading="true"] {
126
+ .Button_button__fe4m9pi[data-loading="true"] {
114
127
  background-color: #F7F7F7;
115
128
  }
116
- .Button_button_fullWidth_true__fe4m9pi {
129
+ .Button_button_fullWidth_true__fe4m9pj {
117
130
  width: 100%;
118
131
  }
119
- .Button_buttonContent__fe4m9px {
132
+ .Button_buttonContent__fe4m9pz {
120
133
  display: flex;
121
134
  justify-content: center;
122
135
  align-items: center;
@@ -125,13 +138,13 @@
125
138
  white-space: nowrap;
126
139
  min-width: max-content;
127
140
  }
128
- .Button_buttonContent_flexReverse_true__fe4m9p10 {
141
+ .Button_buttonContent_flexReverse_true__fe4m9p12 {
129
142
  flex-direction: row-reverse;
130
143
  }
131
- .Button_buttonContent_loading_true__fe4m9p11 {
144
+ .Button_buttonContent_loading_true__fe4m9p13 {
132
145
  opacity: 0;
133
146
  }
134
- .Button_buttonLoader__fe4m9p12 {
147
+ .Button_buttonLoader__fe4m9p14 {
135
148
  position: absolute;
136
149
  top: 0;
137
150
  left: 0;
@@ -1,8 +1,8 @@
1
1
  import './Button.css.ts.vanilla.css';
2
2
  import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
3
3
 
4
- var button = createRuntimeFn({ defaultClassName: "Button_button__fe4m9ph Button_buttonBase__fe4m9p0", variantClassNames: { fullWidth: { true: "Button_button_fullWidth_true__fe4m9pi" }, buttonRadius: { round: "Button_buttonRadius_round__fe4m9pf", "default": "Button_buttonRadius_default__fe4m9pg" }, buttonShadow: { none: "Button_buttonShadow_none__fe4m9pc", small: "Button_buttonShadow_small__fe4m9pd", "default": "Button_buttonShadow_default__fe4m9pe" }, buttonVariant: { primary: "Button_buttonVariant_primary__fe4m9p1", secondary: "Button_buttonVariant_secondary__fe4m9p2", ghost: "Button_buttonVariant_ghost__fe4m9p3", tertiary: "Button_buttonVariant_tertiary__fe4m9p4", prio: "Button_buttonVariant_prio__fe4m9p5" }, buttonPadding: { small: "Button_buttonPadding_small__fe4m9p8", medium: "Button_buttonPadding_medium__fe4m9p9", large: "Button_buttonPadding_large__fe4m9pa", icon: "Button_buttonPadding_icon__fe4m9pb" } }, defaultVariants: { buttonPadding: "large", buttonRadius: "default", buttonShadow: "default", buttonVariant: "primary" }, compoundVariants: [] });
5
- var buttonContent = createRuntimeFn({ defaultClassName: "Button_buttonContent__fe4m9px", variantClassNames: { buttonFontSize: { small: "Button_buttonFontSize_small__fe4m9p6", "default": "Button_buttonFontSize_default__fe4m9p7" }, flexReverse: { true: "Button_buttonContent_flexReverse_true__fe4m9p10" }, loading: { true: "Button_buttonContent_loading_true__fe4m9p11" } }, defaultVariants: { buttonFontSize: "default" }, compoundVariants: [] });
6
- var buttonLoader = "Button_buttonLoader__fe4m9p12";
4
+ var button = createRuntimeFn({ defaultClassName: "Button_button__fe4m9pi Button_buttonBase__fe4m9p0", variantClassNames: { fullWidth: { true: "Button_button_fullWidth_true__fe4m9pj" }, buttonRadius: { round: "Button_buttonRadius_round__fe4m9pg", "default": "Button_buttonRadius_default__fe4m9ph" }, buttonShadow: { none: "Button_buttonShadow_none__fe4m9pd", small: "Button_buttonShadow_small__fe4m9pe", "default": "Button_buttonShadow_default__fe4m9pf" }, buttonVariant: { primary: "Button_buttonVariant_primary__fe4m9p1", secondary: "Button_buttonVariant_secondary__fe4m9p2", ghost: "Button_buttonVariant_ghost__fe4m9p3", tertiary: "Button_buttonVariant_tertiary__fe4m9p4", prio: "Button_buttonVariant_prio__fe4m9p5", dark: "Button_buttonVariant_dark__fe4m9p6" }, buttonPadding: { small: "Button_buttonPadding_small__fe4m9p9", medium: "Button_buttonPadding_medium__fe4m9pa", large: "Button_buttonPadding_large__fe4m9pb", icon: "Button_buttonPadding_icon__fe4m9pc" } }, defaultVariants: { buttonPadding: "large", buttonRadius: "default", buttonShadow: "default", buttonVariant: "primary" }, compoundVariants: [] });
5
+ var buttonContent = createRuntimeFn({ defaultClassName: "Button_buttonContent__fe4m9pz", variantClassNames: { buttonFontSize: { small: "Button_buttonFontSize_small__fe4m9p7", "default": "Button_buttonFontSize_default__fe4m9p8" }, flexReverse: { true: "Button_buttonContent_flexReverse_true__fe4m9p12" }, loading: { true: "Button_buttonContent_loading_true__fe4m9p13" } }, defaultVariants: { buttonFontSize: "default" }, compoundVariants: [] });
6
+ var buttonLoader = "Button_buttonLoader__fe4m9p14";
7
7
 
8
8
  export { button, buttonContent, buttonLoader };
@@ -2,7 +2,7 @@ import React from 'react';
2
2
 
3
3
  declare type TCgButton = {
4
4
  size?: 'small' | 'medium' | 'icon' | 'large';
5
- variant?: 'primary' | 'secondary' | 'ghost' | 'tertiary' | 'prio';
5
+ variant?: 'primary' | 'secondary' | 'ghost' | 'tertiary' | 'prio' | 'dark';
6
6
  icon?: React.ReactNode;
7
7
  flexReverse?: boolean;
8
8
  loading?: boolean;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@citygross/components_v2",
3
- "version": "0.0.24",
3
+ "version": "0.0.26",
4
4
  "license": "ISC",
5
5
  "sideEffects": false,
6
6
  "main": "./dist/index.js",
@@ -66,7 +66,7 @@
66
66
  },
67
67
  "dependencies": {
68
68
  "@citygross/design-tokens_v2": "^0.0.4",
69
- "@citygross/icons_v2": "^0.0.2",
69
+ "@citygross/icons_v2": "^0.0.3",
70
70
  "@citygross/react-use-bg-wizard": "^0.0.8",
71
71
  "@citygross/typography": "^0.0.89",
72
72
  "@citygross/utils": "^0.0.39",
@@ -79,5 +79,5 @@
79
79
  "react-slick": "^0.30.1",
80
80
  "slick-carousel": "^1.8.1"
81
81
  },
82
- "gitHead": "357ad9c6613b818ec816b27e67e96b62374adb8c"
82
+ "gitHead": "b816a660d3c0e07f9f4497f0400e77c6db9dd2a1"
83
83
  }