@besaitech/ng-design-system 0.0.50 → 0.0.51
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.
|
@@ -163,12 +163,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
163
163
|
const BASE = 'inline-flex items-center justify-center gap-2 font-medium ' +
|
|
164
164
|
'transition-colors duration-150 select-none whitespace-nowrap cursor-pointer ' +
|
|
165
165
|
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 ' +
|
|
166
|
-
'focus-visible:ring-
|
|
166
|
+
'focus-visible:ring-offset-surface focus-visible:ring-brand-500 ' +
|
|
167
|
+
'disabled:opacity-50 disabled:pointer-events-none';
|
|
168
|
+
/**
|
|
169
|
+
* Dark mode has its own fills. A monochrome brand's dark 600 step is a mid-dark grey: as a primary fill
|
|
170
|
+
* it read as disabled, and at `disabled:opacity-50` the real disabled state looked the same. So the dark
|
|
171
|
+
* primary is the inverted light fill (`ink` on `surface`); tertiary and ghost swap their black/brand-50
|
|
172
|
+
* tints for white ones, which show on a dark surface.
|
|
173
|
+
*/
|
|
167
174
|
const VARIANTS$2 = {
|
|
168
|
-
primary: 'bg-brand-600 text-white shadow-sm hover:bg-brand-700 active:bg-brand-800'
|
|
175
|
+
primary: 'bg-brand-600 text-white shadow-sm hover:bg-brand-700 active:bg-brand-800 ' +
|
|
176
|
+
'dark:bg-ink dark:text-surface dark:hover:bg-ink/90 dark:active:bg-ink/80',
|
|
169
177
|
secondary: 'bg-surface text-ink border border-border shadow-sm hover:bg-muted active:bg-brand-50',
|
|
170
|
-
tertiary: 'bg-brand-50 text-brand-700 hover:bg-brand-100 active:bg-brand-200/70'
|
|
171
|
-
|
|
178
|
+
tertiary: 'bg-brand-50 text-brand-700 hover:bg-brand-100 active:bg-brand-200/70 ' +
|
|
179
|
+
'dark:bg-white/10 dark:text-ink dark:hover:bg-white/15 dark:active:bg-white/20',
|
|
180
|
+
ghost: 'bg-transparent text-ink-soft hover:bg-black/5 active:bg-black/10 ' +
|
|
181
|
+
'dark:hover:bg-white/10 dark:active:bg-white/15',
|
|
172
182
|
danger: 'bg-danger text-white shadow-sm hover:brightness-95 active:brightness-90',
|
|
173
183
|
};
|
|
174
184
|
const SIZES$b = {
|