@drivy/cobalt 2.10.0 → 2.11.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 (5) hide show
  1. package/components/Buttons/Button/index.js +1 -1
  2. package/components/Buttons/Button/index.js.map +1 -1
  3. package/package.json +3 -3
  4. package/styles/components/Buttons/Button/index.scss +114 -75
  5. package/utils/getCobaltTailwindcssConfig.js.map +1 -1
package/components/Buttons/Button/index.js CHANGED
@@ -38,7 +38,7 @@ const Button = forwardRef((props, ref) => {
38
38
  });
39
39
  const content = (React.createElement(React.Fragment, null,
40
40
  icon,
41
- children && React.createElement("span", null, children),
41
+ children,
42
42
  text && children ? React.createElement(ChevronRightIcon, null) : null));
43
43
  if (isLinkProps(restProps)) {
44
44
  return (React.createElement(ButtonLinkBase, { ...restProps, className: computedClassName, ref: ref }, content));
package/components/Buttons/Button/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../../../src/components/Buttons/Button/index.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\"\nimport cx from \"classnames\"\nimport {\n ButtonComponentProps,\n ButtonLinkComponentProps,\n ButtonProps,\n isLinkProps,\n} from \"./type\"\nimport { ButtonLinkBase, ButtonBase } from \"./ButtonComponent\"\nimport { ChevronRightIcon } from \"../../Icon\"\n\nconst getComputedClassName = ({\n className,\n variant,\n size,\n destructive,\n primary,\n text,\n isIconOnly,\n fullWidth,\n selected,\n}: {\n className?: ButtonProps[\"className\"]\n variant?: ButtonProps[\"variant\"]\n size?: ButtonProps[\"size\"]\n destructive?: ButtonProps[\"destructive\"]\n primary?: ButtonProps[\"primary\"]\n text?: ButtonProps[\"text\"]\n isIconOnly?: boolean\n fullWidth?: ButtonProps[\"fullWidth\"]\n selected?: ButtonProps[\"selected\"]\n}) => {\n return cx(className, \"cobalt-button\", {\n \"cobalt-button--primary\": primary,\n \"cobalt-button--destructive\": destructive,\n \"cobalt-button--text\": text,\n \"cobalt-button--icon-only\": isIconOnly,\n \"cobalt-button--small\": size === \"small\",\n \"cobalt-button--large\": size === \"large\",\n \"cobalt-button--warning\": variant === \"warning\",\n \"cobalt-button--secondary\": variant === \"secondary\",\n \"cobalt-button--tertiary\": variant === \"tertiary\",\n \"cobalt-button--business\": variant === \"business\",\n \"cobalt-button--success\": variant === \"success\",\n \"cobalt-button--neutral\": variant === \"neutral\",\n \"cobalt-button--selected\": selected,\n \"c-w-full\": fullWidth,\n })\n}\n\ninterface ButtonOverloads {\n (\n props: Exclude<ButtonProps, ButtonComponentProps> &\n React.RefAttributes<HTMLAnchorElement>\n ): React.ReactElement\n (\n props: Exclude<ButtonProps, ButtonLinkComponentProps> &\n React.RefAttributes<HTMLButtonElement>\n ): React.ReactElement\n displayName?: string\n}\n\nconst Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(\n (props, ref) => {\n const {\n children,\n className,\n variant,\n size,\n destructive,\n primary,\n text,\n icon,\n fullWidth,\n selected,\n ...restProps\n } = props\n\n const computedClassName = getComputedClassName({\n className,\n variant,\n size,\n destructive,\n primary,\n text,\n fullWidth,\n selected,\n isIconOnly: !!icon && !children,\n })\n\n const content = (\n <>\n {icon}\n {children && <span>{children}</span>}\n {text && children ? <ChevronRightIcon /> : null}\n </>\n )\n\n if (isLinkProps(restProps)) {\n return (\n <ButtonLinkBase\n {...(restProps as ButtonLinkComponentProps)}\n className={computedClassName}\n ref={ref as React.ForwardedRef<HTMLAnchorElement>}\n >\n {content}\n </ButtonLinkBase>\n )\n }\n\n return (\n <ButtonBase\n {...(restProps as ButtonComponentProps)}\n className={computedClassName}\n ref={ref as React.ForwardedRef<HTMLButtonElement>}\n >\n {content}\n </ButtonBase>\n )\n }\n) as ButtonOverloads\n\nButton.displayName = \"Button\"\n\nexport default Button\n"],"names":[],"mappings":";;;;;;;AAWA,MAAM,oBAAoB,GAAG,CAAC,EAC5B,SAAS,EACT,OAAO,EACP,IAAI,EACJ,WAAW,EACX,OAAO,EACP,IAAI,EACJ,UAAU,EACV,SAAS,EACT,QAAQ,GAWT,KAAI;AACH,IAAA,OAAO,EAAE,CAAC,SAAS,EAAE,eAAe,EAAE;AACpC,QAAA,wBAAwB,EAAE,OAAO;AACjC,QAAA,4BAA4B,EAAE,WAAW;AACzC,QAAA,qBAAqB,EAAE,IAAI;AAC3B,QAAA,0BAA0B,EAAE,UAAU;QACtC,sBAAsB,EAAE,IAAI,KAAK,OAAO;QACxC,sBAAsB,EAAE,IAAI,KAAK,OAAO;QACxC,wBAAwB,EAAE,OAAO,KAAK,SAAS;QAC/C,0BAA0B,EAAE,OAAO,KAAK,WAAW;QACnD,yBAAyB,EAAE,OAAO,KAAK,UAAU;QACjD,yBAAyB,EAAE,OAAO,KAAK,UAAU;QACjD,wBAAwB,EAAE,OAAO,KAAK,SAAS;QAC/C,wBAAwB,EAAE,OAAO,KAAK,SAAS;AAC/C,QAAA,yBAAyB,EAAE,QAAQ;AACnC,QAAA,UAAU,EAAE,SAAS;AACtB,KAAA,CAAC,CAAA;AACJ,CAAC,CAAA;AAcK,MAAA,MAAM,GAAG,UAAU,CACvB,CAAC,KAAK,EAAE,GAAG,KAAI;IACb,MAAM,EACJ,QAAQ,EACR,SAAS,EACT,OAAO,EACP,IAAI,EACJ,WAAW,EACX,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,GAAG,SAAS,EACb,GAAG,KAAK,CAAA;IAET,MAAM,iBAAiB,GAAG,oBAAoB,CAAC;QAC7C,SAAS;QACT,OAAO;QACP,IAAI;QACJ,WAAW;QACX,OAAO;QACP,IAAI;QACJ,SAAS;QACT,QAAQ;AACR,QAAA,UAAU,EAAE,CAAC,CAAC,IAAI,IAAI,CAAC,QAAQ;AAChC,KAAA,CAAC,CAAA;IAEF,MAAM,OAAO,IACX,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA;QACG,IAAI;QACJ,QAAQ,IAAI,KAAO,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAA,QAAQ,CAAQ;AACnC,QAAA,IAAI,IAAI,QAAQ,GAAG,KAAC,CAAA,aAAA,CAAA,gBAAgB,EAAG,IAAA,CAAA,GAAG,IAAI,CAC9C,CACJ,CAAA;AAED,IAAA,IAAI,WAAW,CAAC,SAAS,CAAC,EAAE;AAC1B,QAAA,QACE,KAAC,CAAA,aAAA,CAAA,cAAc,EACR,EAAA,GAAA,SAAsC,EAC3C,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,GAA4C,IAEhD,OAAO,CACO,EAClB;KACF;AAED,IAAA,QACE,KAAC,CAAA,aAAA,CAAA,UAAU,EACJ,EAAA,GAAA,SAAkC,EACvC,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,GAA4C,IAEhD,OAAO,CACG,EACd;AACH,CAAC,EACiB;AAEpB,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}
1
+ {"version":3,"file":"index.js","sources":["../../../../src/components/Buttons/Button/index.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\"\nimport cx from \"classnames\"\nimport {\n ButtonComponentProps,\n ButtonLinkComponentProps,\n ButtonProps,\n isLinkProps,\n} from \"./type\"\nimport { ButtonLinkBase, ButtonBase } from \"./ButtonComponent\"\nimport { ChevronRightIcon } from \"../../Icon\"\n\nconst getComputedClassName = ({\n className,\n variant,\n size,\n destructive,\n primary,\n text,\n isIconOnly,\n fullWidth,\n selected,\n}: {\n className?: ButtonProps[\"className\"]\n variant?: ButtonProps[\"variant\"]\n size?: ButtonProps[\"size\"]\n destructive?: ButtonProps[\"destructive\"]\n primary?: ButtonProps[\"primary\"]\n text?: ButtonProps[\"text\"]\n isIconOnly?: boolean\n fullWidth?: ButtonProps[\"fullWidth\"]\n selected?: ButtonProps[\"selected\"]\n}) => {\n return cx(className, \"cobalt-button\", {\n \"cobalt-button--primary\": primary,\n \"cobalt-button--destructive\": destructive,\n \"cobalt-button--text\": text,\n \"cobalt-button--icon-only\": isIconOnly,\n \"cobalt-button--small\": size === \"small\",\n \"cobalt-button--large\": size === \"large\",\n \"cobalt-button--warning\": variant === \"warning\",\n \"cobalt-button--secondary\": variant === \"secondary\",\n \"cobalt-button--tertiary\": variant === \"tertiary\",\n \"cobalt-button--business\": variant === \"business\",\n \"cobalt-button--success\": variant === \"success\",\n \"cobalt-button--neutral\": variant === \"neutral\",\n \"cobalt-button--selected\": selected,\n \"c-w-full\": fullWidth,\n })\n}\n\ninterface ButtonOverloads {\n (\n props: Exclude<ButtonProps, ButtonComponentProps> &\n React.RefAttributes<HTMLAnchorElement>\n ): React.ReactElement\n (\n props: Exclude<ButtonProps, ButtonLinkComponentProps> &\n React.RefAttributes<HTMLButtonElement>\n ): React.ReactElement\n displayName?: string\n}\n\nconst Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(\n (props, ref) => {\n const {\n children,\n className,\n variant,\n size,\n destructive,\n primary,\n text,\n icon,\n fullWidth,\n selected,\n ...restProps\n } = props\n\n const computedClassName = getComputedClassName({\n className,\n variant,\n size,\n destructive,\n primary,\n text,\n fullWidth,\n selected,\n isIconOnly: !!icon && !children,\n })\n\n const content = (\n <>\n {icon}\n {children}\n {text && children ? <ChevronRightIcon /> : null}\n </>\n )\n\n if (isLinkProps(restProps)) {\n return (\n <ButtonLinkBase\n {...(restProps as ButtonLinkComponentProps)}\n className={computedClassName}\n ref={ref as React.ForwardedRef<HTMLAnchorElement>}\n >\n {content}\n </ButtonLinkBase>\n )\n }\n\n return (\n <ButtonBase\n {...(restProps as ButtonComponentProps)}\n className={computedClassName}\n ref={ref as React.ForwardedRef<HTMLButtonElement>}\n >\n {content}\n </ButtonBase>\n )\n }\n) as ButtonOverloads\n\nButton.displayName = \"Button\"\n\nexport default Button\n"],"names":[],"mappings":";;;;;;;AAWA,MAAM,oBAAoB,GAAG,CAAC,EAC5B,SAAS,EACT,OAAO,EACP,IAAI,EACJ,WAAW,EACX,OAAO,EACP,IAAI,EACJ,UAAU,EACV,SAAS,EACT,QAAQ,GAWT,KAAI;AACH,IAAA,OAAO,EAAE,CAAC,SAAS,EAAE,eAAe,EAAE;AACpC,QAAA,wBAAwB,EAAE,OAAO;AACjC,QAAA,4BAA4B,EAAE,WAAW;AACzC,QAAA,qBAAqB,EAAE,IAAI;AAC3B,QAAA,0BAA0B,EAAE,UAAU;QACtC,sBAAsB,EAAE,IAAI,KAAK,OAAO;QACxC,sBAAsB,EAAE,IAAI,KAAK,OAAO;QACxC,wBAAwB,EAAE,OAAO,KAAK,SAAS;QAC/C,0BAA0B,EAAE,OAAO,KAAK,WAAW;QACnD,yBAAyB,EAAE,OAAO,KAAK,UAAU;QACjD,yBAAyB,EAAE,OAAO,KAAK,UAAU;QACjD,wBAAwB,EAAE,OAAO,KAAK,SAAS;QAC/C,wBAAwB,EAAE,OAAO,KAAK,SAAS;AAC/C,QAAA,yBAAyB,EAAE,QAAQ;AACnC,QAAA,UAAU,EAAE,SAAS;AACtB,KAAA,CAAC,CAAA;AACJ,CAAC,CAAA;AAcK,MAAA,MAAM,GAAG,UAAU,CACvB,CAAC,KAAK,EAAE,GAAG,KAAI;IACb,MAAM,EACJ,QAAQ,EACR,SAAS,EACT,OAAO,EACP,IAAI,EACJ,WAAW,EACX,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,GAAG,SAAS,EACb,GAAG,KAAK,CAAA;IAET,MAAM,iBAAiB,GAAG,oBAAoB,CAAC;QAC7C,SAAS;QACT,OAAO;QACP,IAAI;QACJ,WAAW;QACX,OAAO;QACP,IAAI;QACJ,SAAS;QACT,QAAQ;AACR,QAAA,UAAU,EAAE,CAAC,CAAC,IAAI,IAAI,CAAC,QAAQ;AAChC,KAAA,CAAC,CAAA;IAEF,MAAM,OAAO,IACX,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA;QACG,IAAI;QACJ,QAAQ;AACR,QAAA,IAAI,IAAI,QAAQ,GAAG,KAAC,CAAA,aAAA,CAAA,gBAAgB,EAAG,IAAA,CAAA,GAAG,IAAI,CAC9C,CACJ,CAAA;AAED,IAAA,IAAI,WAAW,CAAC,SAAS,CAAC,EAAE;AAC1B,QAAA,QACE,KAAC,CAAA,aAAA,CAAA,cAAc,EACR,EAAA,GAAA,SAAsC,EAC3C,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,GAA4C,IAEhD,OAAO,CACO,EAClB;KACF;AAED,IAAA,QACE,KAAC,CAAA,aAAA,CAAA,UAAU,EACJ,EAAA,GAAA,SAAkC,EACvC,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,GAA4C,IAEhD,OAAO,CACG,EACd;AACH,CAAC,EACiB;AAEpB,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@drivy/cobalt",
3
- "version": "2.10.0",
3
+ "version": "2.11.1",
4
4
  "description": "Opinionated design system for Drivy's projects.",
5
5
  "main": "src/index.js",
6
6
  "types": "types/src/index.d.ts",
@@ -42,7 +42,7 @@
42
42
  "@getaround-eu/prettier-config": "1.2.1",
43
43
  "@getaround-eu/stylelint-config": "3.0.1",
44
44
  "@getaround-eu/ts-config": "2.2.1",
45
- "@rollup/plugin-commonjs": "28.0.6",
45
+ "@rollup/plugin-commonjs": "28.0.9",
46
46
  "@rollup/plugin-json": "6.1.0",
47
47
  "@rushstack/eslint-patch": "1.12.0",
48
48
  "@storybook/addon-essentials": "7.6.21",
@@ -62,7 +62,7 @@
62
62
  "@types/react": "18.3.24",
63
63
  "@types/react-dom": "18.3.7",
64
64
  "autoprefixer": "10.4.23",
65
- "core-js": "3.47.0",
65
+ "core-js": "3.48.0",
66
66
  "css-loader": "7.1.2",
67
67
  "eslint": "8.57.1",
68
68
  "eslint-plugin-storybook": "^0.12.0",
package/styles/components/Buttons/Button/index.scss CHANGED
@@ -15,6 +15,7 @@
15
15
 
16
16
  transform: scale(1);
17
17
  user-select: none;
18
+ background-clip: border-box;
18
19
  appearance: none;
19
20
 
20
21
  &:active:not([disabled]) {
@@ -30,126 +31,164 @@
30
31
  flex-shrink: 0;
31
32
  }
32
33
 
33
- &.cobalt-button--large {
34
- @apply c-px-md;
35
- min-height: 48px;
36
- min-width: 48px;
34
+ &[href][aria-disabled="true"] {
35
+ pointer-events: none;
37
36
  }
38
37
 
39
- &.cobalt-button--small {
40
- @apply c-px-[12px] hover:c-drop-shadow-md;
41
- min-width: 32px;
42
- min-height: 32px;
43
-
44
- font-size: 14px;
38
+ &[disabled]:not([aria-busy="true"]),
39
+ &[href][aria-disabled="true"]:not([aria-busy="true"]) {
40
+ @apply c-state-none c-text-onSurfaceDisabled c-drop-shadow-none hover:c-no-underline;
41
+ opacity: 1;
42
+ cursor: not-allowed;
45
43
 
46
- .cobalt-Icon {
47
- width: 20px;
48
- height: 20px;
44
+ &:not(.cobalt-button--text) {
45
+ @apply c-bg-disabled c-border-transparent;
49
46
  }
47
+ }
50
48
 
51
- &.cobalt-button--warning {
52
- @apply c-bg-warning c-border-warning c-text-onWarning;
53
- }
49
+ &[aria-busy="true"]:not(.cobalt-button--text) {
50
+ @apply c-state-none c-drop-shadow-none hover:c-no-underline;
51
+ --c-state-interactive-color: var(--c-press);
54
52
 
55
- &.cobalt-button--tertiary {
56
- @apply c-bg-tertiary c-border-tertiary c-text-onTertiary;
57
- }
53
+ &:focus,
54
+ &:hover,
55
+ &:active {
56
+ --c-state-interactive-color: var(--c-press);
58
57
 
59
- &.cobalt-button--secondary {
60
- @apply c-bg-secondary c-border-secondary c-text-onSecondary;
58
+ transform: scale(1);
61
59
  }
60
+ }
62
61
 
63
- &.cobalt-button--business {
64
- @apply c-bg-businessContainer c-border-businessContainer c-text-onBusinessContainer;
65
- }
62
+ .cobalt-button__loading-icon {
63
+ @apply c-text-onSurface;
64
+ position: absolute;
66
65
 
67
- &.cobalt-button--success {
68
- @apply c-bg-success c-border-success c-text-onSuccess;
69
- }
66
+ display: none;
70
67
 
71
- &.cobalt-button--neutral {
72
- @apply c-bg-neutral c-border-neutral c-text-onNeutral;
73
- }
68
+ margin: auto;
74
69
  }
75
70
 
76
- &.cobalt-button--primary {
77
- @apply c-bg-primary c-border-primary c-text-onPrimary;
71
+ &[aria-busy="true"] {
72
+ color: transparent !important;
78
73
 
79
- &.cobalt-button--destructive {
80
- @apply c-bg-error c-border-error c-text-onError;
81
- }
74
+ cursor: progress;
82
75
  }
83
76
 
84
- &.cobalt-button--icon-only {
85
- @apply c-p-none c-rounded-full;
77
+ &[aria-busy="true"] > .cobalt-button__loading-icon {
78
+ display: inline-block;
86
79
  }
80
+ }
87
81
 
88
- &.cobalt-button--text {
89
- @apply c-state-none c-transform-none hover:c-underline c-px-none c-bg-transparent c-border-transparent c-text-current c-drop-shadow-none c-gap-none;
90
- transition: text-underline-offset 0.25s ease;
82
+ .cobalt-button--large {
83
+ @apply c-px-md;
84
+ min-height: 48px;
85
+ min-width: 48px;
86
+ }
91
87
 
92
- text-underline-offset: 2px;
88
+ .cobalt-button--small {
89
+ @apply c-px-[12px] c-border-transparent hover:c-drop-shadow-md;
90
+ min-width: 32px;
91
+ min-height: 32px;
93
92
 
94
- &:active {
95
- text-underline-offset: 1px;
93
+ font-size: 14px;
94
+
95
+ .cobalt-Icon {
96
+ width: 20px;
97
+ height: 20px;
98
+ }
99
+
100
+ &.cobalt-button--warning {
101
+ @apply c-bg-warning c-text-onWarning;
102
+
103
+ .cobalt-button__loading-icon {
104
+ @apply c-text-onWarning;
96
105
  }
106
+ }
97
107
 
98
- &.cobalt-button--icon-only {
99
- @apply c-state-interactive;
108
+ &.cobalt-button--tertiary {
109
+ @apply c-bg-tertiary c-text-onTertiary;
110
+
111
+ .cobalt-button__loading-icon {
112
+ @apply c-text-onTertiary;
100
113
  }
101
114
  }
102
115
 
103
- &.cobalt-button--destructive {
104
- @apply c-text-error;
116
+ &.cobalt-button--secondary {
117
+ @apply c-bg-secondary c-text-onSecondary;
118
+
119
+ .cobalt-button__loading-icon {
120
+ @apply c-text-onSecondary;
121
+ }
105
122
  }
106
123
 
107
- &.cobalt-button--selected {
108
- @apply c-bg-primaryContainer c-text-onPrimaryContainer c-border-onPrimaryContainer;
124
+ &.cobalt-button--business {
125
+ @apply c-bg-businessContainer c-text-onBusinessContainer;
126
+
127
+ .cobalt-button__loading-icon {
128
+ @apply c-text-onBusinessContainer;
129
+ }
109
130
  }
110
131
 
111
- &[href][aria-disabled="true"] {
112
- pointer-events: none;
132
+ &.cobalt-button--success {
133
+ @apply c-bg-success c-text-onSuccess;
134
+
135
+ .cobalt-button__loading-icon {
136
+ @apply c-text-onSuccess;
137
+ }
113
138
  }
114
139
 
115
- &[disabled]:not([aria-busy="true"]),
116
- &[href][aria-disabled="true"]:not([aria-busy="true"]) {
117
- @apply c-state-none c-text-onSurfaceDisabled c-drop-shadow-none hover:c-no-underline;
118
- opacity: 1;
119
- cursor: not-allowed;
140
+ &.cobalt-button--neutral {
141
+ @apply c-bg-neutral c-text-onNeutral;
120
142
 
121
- &:not(.cobalt-button--text) {
122
- @apply c-bg-disabled c-border-transparent;
143
+ .cobalt-button__loading-icon {
144
+ @apply c-text-onNeutral;
123
145
  }
124
146
  }
147
+ }
125
148
 
126
- &[aria-busy="true"] {
127
- @apply c-state-none c-drop-shadow-none hover:c-no-underline;
128
- --c-state-interactive-color: var(--c-press);
129
- cursor: not-allowed;
149
+ .cobalt-button--primary {
150
+ @apply c-bg-primary c-border-transparent c-text-onPrimary;
130
151
 
131
- &:focus,
132
- &:hover,
133
- &:active {
134
- --c-state-interactive-color: var(--c-press);
152
+ .cobalt-button__loading-icon {
153
+ @apply c-text-onPrimary;
154
+ }
135
155
 
136
- transform: scale(1);
156
+ &.cobalt-button--destructive {
157
+ @apply c-bg-error c-border-error c-text-onError;
158
+
159
+ .cobalt-button__loading-icon {
160
+ @apply c-text-onError;
137
161
  }
138
162
  }
163
+ }
139
164
 
140
- .cobalt-button__loading-icon {
141
- position: absolute;
165
+ .cobalt-button--text {
166
+ @apply c-state-none c-transform-none hover:c-underline c-px-none c-bg-transparent c-border-transparent c-text-current c-gap-none;
167
+ transition: text-underline-offset 0.25s ease;
142
168
 
143
- display: none;
169
+ text-underline-offset: 2px;
144
170
 
145
- margin: auto;
171
+ &:active {
172
+ text-underline-offset: 1px;
146
173
  }
147
174
 
148
- &[aria-busy="true"] > *:not(.cobalt-button__loading-icon) {
149
- color: transparent;
175
+ &:not(.cobalt-button--icon-only) {
176
+ @apply c-drop-shadow-none;
150
177
  }
151
178
 
152
- &[aria-busy="true"] > .cobalt-button__loading-icon {
153
- display: inline-block;
179
+ &.cobalt-button--icon-only:not([aria-busy="true"]):not([disabled]) {
180
+ @apply c-state-interactive;
154
181
  }
155
182
  }
183
+
184
+ .cobalt-button--icon-only {
185
+ @apply c-p-none c-rounded-full;
186
+ }
187
+
188
+ .cobalt-button--destructive {
189
+ @apply c-text-error;
190
+ }
191
+
192
+ .cobalt-button--selected {
193
+ @apply c-bg-primaryContainer c-text-onPrimaryContainer c-border-onPrimaryContainer;
194
+ }
package/utils/getCobaltTailwindcssConfig.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"getCobaltTailwindcssConfig.js","sources":["../../utils/getCobaltTailwindcssConfig.js?commonjs-entry"],"sourcesContent":["import { getDefaultExportFromCjs } from \"\u0000commonjsHelpers.js\";\nimport { __require as requireGetCobaltTailwindcssConfig } from \"/Users/thibaudesnouf/sources/cobalt/utils/getCobaltTailwindcssConfig.js\";\nvar getCobaltTailwindcssConfigExports = requireGetCobaltTailwindcssConfig();\nexport { getCobaltTailwindcssConfigExports as __moduleExports };\nexport default /*@__PURE__*/getDefaultExportFromCjs(getCobaltTailwindcssConfigExports);"],"names":[],"mappings":";;;AAEA,IAAI,iCAAiC,GAAG,iCAAiC,EAAE,CAAC;AAE5E,iCAAe,aAAa,uBAAuB,CAAC,iCAAiC,CAAC;;;;"}
1
+ {"version":3,"file":"getCobaltTailwindcssConfig.js","sources":["../../utils/getCobaltTailwindcssConfig.js?commonjs-entry"],"sourcesContent":["import { getDefaultExportFromCjs } from \"\u0000commonjsHelpers.js\";\nimport { __require as requireGetCobaltTailwindcssConfig } from \"/Users/cedric/Dev/drivy/cobalt/utils/getCobaltTailwindcssConfig.js\";\nvar getCobaltTailwindcssConfigExports = requireGetCobaltTailwindcssConfig();\nexport { getCobaltTailwindcssConfigExports as __moduleExports };\nexport default /*@__PURE__*/getDefaultExportFromCjs(getCobaltTailwindcssConfigExports);"],"names":[],"mappings":";;;AAEA,IAAI,iCAAiC,GAAG,iCAAiC,EAAE,CAAC;AAE5E,iCAAe,aAAa,uBAAuB,CAAC,iCAAiC,CAAC;;;;"}