@cdx-ui/components 0.0.1-beta.102 → 0.0.1-beta.103
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.
- package/lib/commonjs/components/Badge/styles.js +2 -2
- package/lib/commonjs/components/Badge/styles.js.map +1 -1
- package/lib/commonjs/components/Button/styles.js +2 -2
- package/lib/commonjs/components/Button/styles.js.map +1 -1
- package/lib/commonjs/components/CLAUDE.md +2 -2
- package/lib/commonjs/components/Checkbox/styles.js +3 -3
- package/lib/commonjs/components/Checkbox/styles.js.map +1 -1
- package/lib/commonjs/components/Chip/styles.js +2 -2
- package/lib/commonjs/components/Chip/styles.js.map +1 -1
- package/lib/commonjs/components/CurrencyInput/styles.js +2 -2
- package/lib/commonjs/components/CurrencyInput/styles.js.map +1 -1
- package/lib/commonjs/components/Dialog/styles.js +2 -2
- package/lib/commonjs/components/Dialog/styles.js.map +1 -1
- package/lib/commonjs/components/Field/styles.js +2 -2
- package/lib/commonjs/components/Field/styles.js.map +1 -1
- package/lib/commonjs/components/IconButton/styles.js +2 -2
- package/lib/commonjs/components/IconButton/styles.js.map +1 -1
- package/lib/commonjs/components/Input/styles.js +2 -2
- package/lib/commonjs/components/Input/styles.js.map +1 -1
- package/lib/commonjs/components/Link/styles.js +2 -2
- package/lib/commonjs/components/Link/styles.js.map +1 -1
- package/lib/commonjs/components/ListItem/styles.js +2 -2
- package/lib/commonjs/components/ListItem/styles.js.map +1 -1
- package/lib/commonjs/components/QuickActionButton/styles.js +3 -3
- package/lib/commonjs/components/QuickActionButton/styles.js.map +1 -1
- package/lib/commonjs/components/Radio/styles.js +3 -3
- package/lib/commonjs/components/Radio/styles.js.map +1 -1
- package/lib/commonjs/components/Select/styles.js +2 -2
- package/lib/commonjs/components/Select/styles.js.map +1 -1
- package/lib/commonjs/components/Textarea/styles.js +2 -2
- package/lib/commonjs/components/Textarea/styles.js.map +1 -1
- package/lib/commonjs/components/Tile/styles.js +2 -2
- package/lib/commonjs/components/Tile/styles.js.map +1 -1
- package/lib/commonjs/styles/constants.js +16 -0
- package/lib/commonjs/styles/constants.js.map +1 -0
- package/lib/module/components/Badge/styles.js +1 -1
- package/lib/module/components/Badge/styles.js.map +1 -1
- package/lib/module/components/Button/styles.js +1 -1
- package/lib/module/components/Button/styles.js.map +1 -1
- package/lib/module/components/CLAUDE.md +2 -2
- package/lib/module/components/Checkbox/styles.js +1 -1
- package/lib/module/components/Checkbox/styles.js.map +1 -1
- package/lib/module/components/Chip/styles.js +1 -1
- package/lib/module/components/Chip/styles.js.map +1 -1
- package/lib/module/components/CurrencyInput/styles.js +1 -1
- package/lib/module/components/CurrencyInput/styles.js.map +1 -1
- package/lib/module/components/Dialog/styles.js +1 -1
- package/lib/module/components/Dialog/styles.js.map +1 -1
- package/lib/module/components/Field/styles.js +1 -1
- package/lib/module/components/Field/styles.js.map +1 -1
- package/lib/module/components/IconButton/styles.js +1 -1
- package/lib/module/components/IconButton/styles.js.map +1 -1
- package/lib/module/components/Input/styles.js +1 -1
- package/lib/module/components/Input/styles.js.map +1 -1
- package/lib/module/components/Link/styles.js +1 -1
- package/lib/module/components/Link/styles.js.map +1 -1
- package/lib/module/components/ListItem/styles.js +1 -1
- package/lib/module/components/ListItem/styles.js.map +1 -1
- package/lib/module/components/QuickActionButton/styles.js +1 -1
- package/lib/module/components/QuickActionButton/styles.js.map +1 -1
- package/lib/module/components/Radio/styles.js +1 -1
- package/lib/module/components/Radio/styles.js.map +1 -1
- package/lib/module/components/Select/styles.js +1 -1
- package/lib/module/components/Select/styles.js.map +1 -1
- package/lib/module/components/Textarea/styles.js +1 -1
- package/lib/module/components/Textarea/styles.js.map +1 -1
- package/lib/module/components/Tile/styles.js +1 -1
- package/lib/module/components/Tile/styles.js.map +1 -1
- package/lib/module/styles/constants.js +12 -0
- package/lib/module/styles/constants.js.map +1 -0
- package/lib/typescript/styles/constants.d.ts +4 -0
- package/lib/typescript/styles/constants.d.ts.map +1 -0
- package/package.json +4 -4
- package/src/components/Badge/styles.ts +1 -1
- package/src/components/Button/styles.ts +1 -1
- package/src/components/CLAUDE.md +2 -2
- package/src/components/Checkbox/styles.ts +1 -1
- package/src/components/Chip/styles.ts +1 -1
- package/src/components/CurrencyInput/styles.ts +1 -1
- package/src/components/Dialog/styles.ts +1 -1
- package/src/components/Field/styles.ts +1 -1
- package/src/components/IconButton/styles.ts +1 -1
- package/src/components/Input/styles.ts +1 -1
- package/src/components/Link/styles.ts +1 -1
- package/src/components/ListItem/styles.ts +1 -1
- package/src/components/QuickActionButton/styles.ts +1 -1
- package/src/components/Radio/styles.ts +1 -1
- package/src/components/Select/styles.ts +1 -1
- package/src/components/Textarea/styles.ts +1 -1
- package/src/components/Tile/styles.ts +1 -1
- package/src/styles/constants.ts +10 -0
- package/lib/commonjs/styles/index.js +0 -17
- package/lib/commonjs/styles/index.js.map +0 -1
- package/lib/commonjs/styles/primitives.js +0 -159
- package/lib/commonjs/styles/primitives.js.map +0 -1
- package/lib/module/styles/index.js +0 -4
- package/lib/module/styles/index.js.map +0 -1
- package/lib/module/styles/primitives.js +0 -155
- package/lib/module/styles/primitives.js.map +0 -1
- package/lib/typescript/styles/index.d.ts +0 -2
- package/lib/typescript/styles/index.d.ts.map +0 -1
- package/lib/typescript/styles/primitives.d.ts +0 -123
- package/lib/typescript/styles/primitives.d.ts.map +0 -1
- package/src/styles/index.ts +0 -1
- package/src/styles/primitives.ts +0 -143
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Platform } from 'react-native';
|
|
2
2
|
import { cva, type VariantProps } from 'class-variance-authority';
|
|
3
|
-
import { TRANSITION_COLORS } from '../../styles/
|
|
3
|
+
import { TRANSITION_COLORS } from '../../styles/constants';
|
|
4
4
|
|
|
5
5
|
// ── Overlay ─────────────────────────────────────────────────
|
|
6
6
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { cva, type VariantProps } from 'class-variance-authority';
|
|
2
|
-
import { DISABLED_OPACITY } from '../../styles/
|
|
2
|
+
import { DISABLED_OPACITY } from '../../styles/constants';
|
|
3
3
|
|
|
4
4
|
export const fieldRootVariants = cva(['group flex-col gap-2', 'web:last:mb-0', DISABLED_OPACITY]);
|
|
5
5
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Platform } from 'react-native';
|
|
2
2
|
import { cva, type VariantProps } from 'class-variance-authority';
|
|
3
|
-
import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/
|
|
3
|
+
import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/constants';
|
|
4
4
|
|
|
5
5
|
export const iconButtonRootVariants = cva(
|
|
6
6
|
[
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { cva, type VariantProps } from 'class-variance-authority';
|
|
2
|
-
import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/
|
|
2
|
+
import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/constants';
|
|
3
3
|
|
|
4
4
|
export const inputRootVariants = cva(
|
|
5
5
|
[
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Platform } from 'react-native';
|
|
2
2
|
import { cva, type VariantProps } from 'class-variance-authority';
|
|
3
|
-
import { TRANSITION_COLORS } from '../../styles/
|
|
3
|
+
import { TRANSITION_COLORS } from '../../styles/constants';
|
|
4
4
|
|
|
5
5
|
export const linkRootVariants = cva([
|
|
6
6
|
'flex-row items-center gap-1',
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Platform } from 'react-native';
|
|
2
2
|
import { cva, type VariantProps } from 'class-variance-authority';
|
|
3
|
-
import { TRANSITION_COLORS } from '../../styles/
|
|
3
|
+
import { TRANSITION_COLORS } from '../../styles/constants';
|
|
4
4
|
|
|
5
5
|
// ── Root (row): density, separator, interactive feedback ───────────────────
|
|
6
6
|
//
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Platform } from 'react-native';
|
|
2
2
|
import { cva, type VariantProps } from 'class-variance-authority';
|
|
3
|
-
import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/
|
|
3
|
+
import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/constants';
|
|
4
4
|
|
|
5
5
|
export const quickActionButtonRootVariants = cva([
|
|
6
6
|
'flex flex-col items-center gap-2',
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Platform } from 'react-native';
|
|
2
2
|
import { cva } from 'class-variance-authority';
|
|
3
|
-
import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/
|
|
3
|
+
import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/constants';
|
|
4
4
|
|
|
5
5
|
export const radioRootVariants = cva([
|
|
6
6
|
'flex-row items-center gap-2',
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Platform } from 'react-native';
|
|
2
2
|
import { cva, type VariantProps } from 'class-variance-authority';
|
|
3
|
-
import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/
|
|
3
|
+
import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/constants';
|
|
4
4
|
|
|
5
5
|
// ── Trigger ─────────────────────────────────────────────────
|
|
6
6
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { cva, type VariantProps } from 'class-variance-authority';
|
|
2
|
-
import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/
|
|
2
|
+
import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/constants';
|
|
3
3
|
|
|
4
4
|
export const textareaRootVariants = cva(
|
|
5
5
|
[
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Platform } from 'react-native';
|
|
2
2
|
import { cva, type VariantProps } from 'class-variance-authority';
|
|
3
|
-
import { TRANSITION_COLORS } from '../../styles/
|
|
3
|
+
import { TRANSITION_COLORS } from '../../styles/constants';
|
|
4
4
|
|
|
5
5
|
export const tileGroupVariants = cva(['flex w-full'], {
|
|
6
6
|
variants: {
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
// packages/components/src/styles/constants.ts
|
|
2
|
+
// Semantic constants for Forge UI component styling.
|
|
3
|
+
|
|
4
|
+
// ─── Transitions ─────────────────────────────────────────
|
|
5
|
+
export const TRANSITION_COLORS = 'transition-colors duration-150';
|
|
6
|
+
|
|
7
|
+
// ─── Disabled ────────────────────────────────────────────
|
|
8
|
+
export const DISABLED_OPACITY = 'data-[disabled=true]:opacity-50';
|
|
9
|
+
export const DISABLED_CURSOR =
|
|
10
|
+
'data-[disabled=true]:cursor-not-allowed data-[disabled=true]:pointer-events-none';
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
var _primitives = require("./primitives");
|
|
7
|
-
Object.keys(_primitives).forEach(function (key) {
|
|
8
|
-
if (key === "default" || key === "__esModule") return;
|
|
9
|
-
if (key in exports && exports[key] === _primitives[key]) return;
|
|
10
|
-
Object.defineProperty(exports, key, {
|
|
11
|
-
enumerable: true,
|
|
12
|
-
get: function () {
|
|
13
|
-
return _primitives[key];
|
|
14
|
-
}
|
|
15
|
-
});
|
|
16
|
-
});
|
|
17
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["_primitives","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get"],"sourceRoot":"../../../src","sources":["styles/index.ts"],"mappings":";;;;;AAAA,IAAAA,WAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,WAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,WAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAT,WAAA,CAAAK,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}
|
|
@@ -1,159 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.TRANSITION_COLORS = exports.SIZE_SCALE = exports.SHADOW_SM = exports.SHADOW_MD = exports.SEMANTIC_COLORS = exports.RADIUS_SM = exports.RADIUS_MD = exports.RADIUS_FULL = exports.FOCUS_RING = exports.DISABLED_OPACITY = exports.DISABLED_CURSOR = exports.COLOR_TEXT_SECONDARY = exports.COLOR_TEXT_PRIMARY = exports.COLOR_TEXT_PLACEHOLDER = exports.COLOR_TEXT_MUTED = exports.COLOR_TEXT_INVERSE = exports.COLOR_TEXT_INVALID = exports.COLOR_BRAND_HOVER = exports.COLOR_BRAND_DEFAULT = exports.COLOR_BRAND_ACTIVE = exports.COLOR_BORDER_STRONG = exports.COLOR_BORDER_INVALID = exports.COLOR_BORDER_FOCUS = exports.COLOR_BORDER_DEFAULT = exports.COLOR_BG_SUBTLE = exports.COLOR_BG_PRIMARY = exports.COLOR_BG_MUTED = exports.COLOR_BG_INVERSE = exports.COLOR_ACCENT_DEFAULT = exports.COLOR_ACCENT_BORDER = void 0;
|
|
7
|
-
// packages/components/src/styles/primitives.ts
|
|
8
|
-
// Semantic constants for Forge UI component styling.
|
|
9
|
-
|
|
10
|
-
// ─── Colors ──────────────────────────────────────────────
|
|
11
|
-
// Surface & background
|
|
12
|
-
/** @deprecated Use `bg-surface-primary` (--color-surface-primary) instead. */
|
|
13
|
-
const COLOR_BG_PRIMARY = exports.COLOR_BG_PRIMARY = 'bg-white';
|
|
14
|
-
/** @deprecated Use `bg-surface-secondary` (--color-surface-secondary) instead. */
|
|
15
|
-
const COLOR_BG_SUBTLE = exports.COLOR_BG_SUBTLE = 'bg-slate-50';
|
|
16
|
-
/** @deprecated Use `bg-surface-neutral-subtle` (--color-surface-neutral-subtle) instead. */
|
|
17
|
-
const COLOR_BG_MUTED = exports.COLOR_BG_MUTED = 'bg-slate-100';
|
|
18
|
-
/** @deprecated Use `bg-base-950` (--color-base-950) instead. */
|
|
19
|
-
const COLOR_BG_INVERSE = exports.COLOR_BG_INVERSE = 'bg-slate-900';
|
|
20
|
-
|
|
21
|
-
// Border
|
|
22
|
-
/** @deprecated Use `border-stroke-secondary` (--color-stroke-secondary) instead. */
|
|
23
|
-
const COLOR_BORDER_DEFAULT = exports.COLOR_BORDER_DEFAULT = 'border-slate-200';
|
|
24
|
-
/** @deprecated Use `border-stroke-hover` (--color-stroke-hover) instead. */
|
|
25
|
-
const COLOR_BORDER_STRONG = exports.COLOR_BORDER_STRONG = 'border-slate-300';
|
|
26
|
-
/** @deprecated Use `border-stroke-focus` (--color-stroke-focus) instead. */
|
|
27
|
-
const COLOR_BORDER_FOCUS = exports.COLOR_BORDER_FOCUS = 'border-slate-900';
|
|
28
|
-
/** @deprecated Use `border-stroke-danger` (--color-stroke-danger) instead. */
|
|
29
|
-
const COLOR_BORDER_INVALID = exports.COLOR_BORDER_INVALID = 'border-red-500';
|
|
30
|
-
|
|
31
|
-
// Text
|
|
32
|
-
/** @deprecated Use `text-content-primary` (--color-content-primary) instead. */
|
|
33
|
-
const COLOR_TEXT_PRIMARY = exports.COLOR_TEXT_PRIMARY = 'text-slate-900';
|
|
34
|
-
/** @deprecated Use `text-content-secondary` (--color-content-secondary) instead. */
|
|
35
|
-
const COLOR_TEXT_SECONDARY = exports.COLOR_TEXT_SECONDARY = 'text-slate-500';
|
|
36
|
-
/** @deprecated Use `text-content-tertiary` (--color-content-tertiary) instead. */
|
|
37
|
-
const COLOR_TEXT_MUTED = exports.COLOR_TEXT_MUTED = 'text-slate-400';
|
|
38
|
-
/** @deprecated Use the appropriate `text-content-*-on-strong` token for the surface color, e.g. `text-content-action-on-strong` (--color-content-action-on-strong). */
|
|
39
|
-
const COLOR_TEXT_INVERSE = exports.COLOR_TEXT_INVERSE = 'text-white';
|
|
40
|
-
/** @deprecated Use `text-content-tertiary` (--color-content-tertiary) instead. */
|
|
41
|
-
const COLOR_TEXT_PLACEHOLDER = exports.COLOR_TEXT_PLACEHOLDER = 'text-slate-400';
|
|
42
|
-
/** @deprecated Use `text-content-danger` (--color-content-danger) instead. */
|
|
43
|
-
const COLOR_TEXT_INVALID = exports.COLOR_TEXT_INVALID = 'text-red-600';
|
|
44
|
-
|
|
45
|
-
// Brand / Action
|
|
46
|
-
/** @deprecated Use `bg-surface-action-strong` (--color-surface-action-strong) instead. */
|
|
47
|
-
const COLOR_BRAND_DEFAULT = exports.COLOR_BRAND_DEFAULT = 'bg-slate-900';
|
|
48
|
-
/** @deprecated Use `bg-surface-action-strong-hover` (--color-surface-action-strong-hover) instead. */
|
|
49
|
-
const COLOR_BRAND_HOVER = exports.COLOR_BRAND_HOVER = 'bg-slate-800';
|
|
50
|
-
/** @deprecated Use `bg-surface-action-strong-active` (--color-surface-action-strong-active) instead. */
|
|
51
|
-
const COLOR_BRAND_ACTIVE = exports.COLOR_BRAND_ACTIVE = 'bg-slate-700';
|
|
52
|
-
|
|
53
|
-
// Accent (for checked states, active indicators)
|
|
54
|
-
/** @deprecated Use `bg-surface-action-strong` (--color-surface-action-strong) instead. */
|
|
55
|
-
const COLOR_ACCENT_DEFAULT = exports.COLOR_ACCENT_DEFAULT = 'bg-slate-900';
|
|
56
|
-
/** @deprecated Use `border-stroke-action` (--color-stroke-action) instead. */
|
|
57
|
-
const COLOR_ACCENT_BORDER = exports.COLOR_ACCENT_BORDER = 'border-slate-900';
|
|
58
|
-
|
|
59
|
-
/**
|
|
60
|
-
* @deprecated Use semantic token classes directly instead. Map each color key to its
|
|
61
|
-
* corresponding `--color-surface-*`, `--color-stroke-*`, and `--color-content-*` tokens:
|
|
62
|
-
* - `bg` → `bg-surface-{color}-strong` (--color-surface-{color}-strong)
|
|
63
|
-
* - `bgHover` → `bg-surface-{color}-strong-hover` (--color-surface-{color}-strong-hover)
|
|
64
|
-
* - `bgActive` → `bg-surface-{color}-strong-active` (--color-surface-{color}-strong-active)
|
|
65
|
-
* - `border` → `border-stroke-{color}` (--color-stroke-{color})
|
|
66
|
-
* - `text` → `text-content-{color}` (--color-content-{color})
|
|
67
|
-
* - `ring` → `ring-[--color-stroke-focus]` (--color-stroke-focus)
|
|
68
|
-
*
|
|
69
|
-
* See Button/styles.ts for a complete migration example.
|
|
70
|
-
*/
|
|
71
|
-
const SEMANTIC_COLORS = exports.SEMANTIC_COLORS = {
|
|
72
|
-
action: {
|
|
73
|
-
bg: 'bg-slate-900',
|
|
74
|
-
bgHover: 'bg-slate-800',
|
|
75
|
-
bgActive: 'bg-slate-700',
|
|
76
|
-
border: 'border-slate-900',
|
|
77
|
-
text: 'text-slate-900',
|
|
78
|
-
ring: 'ring-slate-400/50'
|
|
79
|
-
},
|
|
80
|
-
danger: {
|
|
81
|
-
bg: 'bg-red-600',
|
|
82
|
-
bgHover: 'bg-red-700',
|
|
83
|
-
bgActive: 'bg-red-800',
|
|
84
|
-
border: 'border-red-600',
|
|
85
|
-
text: 'text-red-600',
|
|
86
|
-
ring: 'ring-red-400/50'
|
|
87
|
-
},
|
|
88
|
-
warning: {
|
|
89
|
-
bg: 'bg-amber-500',
|
|
90
|
-
bgHover: 'bg-amber-600',
|
|
91
|
-
bgActive: 'bg-amber-700',
|
|
92
|
-
border: 'border-amber-500',
|
|
93
|
-
text: 'text-amber-600',
|
|
94
|
-
ring: 'ring-amber-400/50'
|
|
95
|
-
},
|
|
96
|
-
success: {
|
|
97
|
-
bg: 'bg-green-600',
|
|
98
|
-
bgHover: 'bg-green-700',
|
|
99
|
-
bgActive: 'bg-green-800',
|
|
100
|
-
border: 'border-green-600',
|
|
101
|
-
text: 'text-green-600',
|
|
102
|
-
ring: 'ring-green-400/50'
|
|
103
|
-
},
|
|
104
|
-
info: {
|
|
105
|
-
bg: 'bg-sky-500',
|
|
106
|
-
bgHover: 'bg-sky-600',
|
|
107
|
-
bgActive: 'bg-sky-700',
|
|
108
|
-
border: 'border-sky-500',
|
|
109
|
-
text: 'text-sky-600',
|
|
110
|
-
ring: 'ring-sky-400/50'
|
|
111
|
-
}
|
|
112
|
-
};
|
|
113
|
-
|
|
114
|
-
// ─── Focus ───────────────────────────────────────────────
|
|
115
|
-
/** @deprecated Use `ring-2 ring-[--color-stroke-focus] ring-offset-2` (--color-stroke-focus) instead. */
|
|
116
|
-
const FOCUS_RING = exports.FOCUS_RING = 'ring-2 ring-slate-400/50 ring-offset-2';
|
|
117
|
-
|
|
118
|
-
// ─── Radius ──────────────────────────────────────────────
|
|
119
|
-
/** @deprecated Use `rounded-[var(--border-radius-button)]` for buttons/inputs or `rounded-[var(--border-radius-default)]` for containers. */
|
|
120
|
-
const RADIUS_SM = exports.RADIUS_SM = 'rounded-lg';
|
|
121
|
-
/** @deprecated Use `rounded-[var(--border-radius-default)]` for cards/containers. */
|
|
122
|
-
const RADIUS_MD = exports.RADIUS_MD = 'rounded-xl';
|
|
123
|
-
/** @deprecated Use `rounded-[var(--border-radius-round)]` for circular elements (icon buttons, radio, pills). */
|
|
124
|
-
const RADIUS_FULL = exports.RADIUS_FULL = 'rounded-full';
|
|
125
|
-
|
|
126
|
-
// ─── Shadows ─────────────────────────────────────────────
|
|
127
|
-
|
|
128
|
-
/** @deprecated Use `shadow-sm` directly instead */
|
|
129
|
-
const SHADOW_SM = exports.SHADOW_SM = 'shadow-sm';
|
|
130
|
-
/** @deprecated Use `shadow-md` directly instead */
|
|
131
|
-
const SHADOW_MD = exports.SHADOW_MD = 'shadow-md';
|
|
132
|
-
|
|
133
|
-
// ─── Sizing ──────────────────────────────────────────────
|
|
134
|
-
// Unified size scale for interactive/form components (Button, Input, Select, Checkbox).
|
|
135
|
-
// Only two sizes: 'default' (regular) and 'small' (compact).
|
|
136
|
-
// NOTE: Text and Heading use a separate typography scale (xs/sm/md/lg/xl) — not this.
|
|
137
|
-
/** @deprecated */
|
|
138
|
-
const SIZE_SCALE = exports.SIZE_SCALE = {
|
|
139
|
-
default: {
|
|
140
|
-
height: 'h-10',
|
|
141
|
-
px: 'px-4',
|
|
142
|
-
gap: 'gap-2',
|
|
143
|
-
text: 'text-base'
|
|
144
|
-
},
|
|
145
|
-
small: {
|
|
146
|
-
height: 'h-8',
|
|
147
|
-
px: 'px-3',
|
|
148
|
-
gap: 'gap-1.5',
|
|
149
|
-
text: 'text-sm'
|
|
150
|
-
}
|
|
151
|
-
};
|
|
152
|
-
|
|
153
|
-
// ─── Transitions ─────────────────────────────────────────
|
|
154
|
-
const TRANSITION_COLORS = exports.TRANSITION_COLORS = 'transition-colors duration-150';
|
|
155
|
-
|
|
156
|
-
// ─── Disabled ────────────────────────────────────────────
|
|
157
|
-
const DISABLED_OPACITY = exports.DISABLED_OPACITY = 'data-[disabled=true]:opacity-50';
|
|
158
|
-
const DISABLED_CURSOR = exports.DISABLED_CURSOR = 'data-[disabled=true]:cursor-not-allowed data-[disabled=true]:pointer-events-none';
|
|
159
|
-
//# sourceMappingURL=primitives.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["COLOR_BG_PRIMARY","exports","COLOR_BG_SUBTLE","COLOR_BG_MUTED","COLOR_BG_INVERSE","COLOR_BORDER_DEFAULT","COLOR_BORDER_STRONG","COLOR_BORDER_FOCUS","COLOR_BORDER_INVALID","COLOR_TEXT_PRIMARY","COLOR_TEXT_SECONDARY","COLOR_TEXT_MUTED","COLOR_TEXT_INVERSE","COLOR_TEXT_PLACEHOLDER","COLOR_TEXT_INVALID","COLOR_BRAND_DEFAULT","COLOR_BRAND_HOVER","COLOR_BRAND_ACTIVE","COLOR_ACCENT_DEFAULT","COLOR_ACCENT_BORDER","SEMANTIC_COLORS","action","bg","bgHover","bgActive","border","text","ring","danger","warning","success","info","FOCUS_RING","RADIUS_SM","RADIUS_MD","RADIUS_FULL","SHADOW_SM","SHADOW_MD","SIZE_SCALE","default","height","px","gap","small","TRANSITION_COLORS","DISABLED_OPACITY","DISABLED_CURSOR"],"sourceRoot":"../../../src","sources":["styles/primitives.ts"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":[],"sourceRoot":"../../../src","sources":["styles/index.ts"],"mappings":";;AAAA,cAAc,cAAc","ignoreList":[]}
|
|
@@ -1,155 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
// packages/components/src/styles/primitives.ts
|
|
4
|
-
// Semantic constants for Forge UI component styling.
|
|
5
|
-
|
|
6
|
-
// ─── Colors ──────────────────────────────────────────────
|
|
7
|
-
// Surface & background
|
|
8
|
-
/** @deprecated Use `bg-surface-primary` (--color-surface-primary) instead. */
|
|
9
|
-
export const COLOR_BG_PRIMARY = 'bg-white';
|
|
10
|
-
/** @deprecated Use `bg-surface-secondary` (--color-surface-secondary) instead. */
|
|
11
|
-
export const COLOR_BG_SUBTLE = 'bg-slate-50';
|
|
12
|
-
/** @deprecated Use `bg-surface-neutral-subtle` (--color-surface-neutral-subtle) instead. */
|
|
13
|
-
export const COLOR_BG_MUTED = 'bg-slate-100';
|
|
14
|
-
/** @deprecated Use `bg-base-950` (--color-base-950) instead. */
|
|
15
|
-
export const COLOR_BG_INVERSE = 'bg-slate-900';
|
|
16
|
-
|
|
17
|
-
// Border
|
|
18
|
-
/** @deprecated Use `border-stroke-secondary` (--color-stroke-secondary) instead. */
|
|
19
|
-
export const COLOR_BORDER_DEFAULT = 'border-slate-200';
|
|
20
|
-
/** @deprecated Use `border-stroke-hover` (--color-stroke-hover) instead. */
|
|
21
|
-
export const COLOR_BORDER_STRONG = 'border-slate-300';
|
|
22
|
-
/** @deprecated Use `border-stroke-focus` (--color-stroke-focus) instead. */
|
|
23
|
-
export const COLOR_BORDER_FOCUS = 'border-slate-900';
|
|
24
|
-
/** @deprecated Use `border-stroke-danger` (--color-stroke-danger) instead. */
|
|
25
|
-
export const COLOR_BORDER_INVALID = 'border-red-500';
|
|
26
|
-
|
|
27
|
-
// Text
|
|
28
|
-
/** @deprecated Use `text-content-primary` (--color-content-primary) instead. */
|
|
29
|
-
export const COLOR_TEXT_PRIMARY = 'text-slate-900';
|
|
30
|
-
/** @deprecated Use `text-content-secondary` (--color-content-secondary) instead. */
|
|
31
|
-
export const COLOR_TEXT_SECONDARY = 'text-slate-500';
|
|
32
|
-
/** @deprecated Use `text-content-tertiary` (--color-content-tertiary) instead. */
|
|
33
|
-
export const COLOR_TEXT_MUTED = 'text-slate-400';
|
|
34
|
-
/** @deprecated Use the appropriate `text-content-*-on-strong` token for the surface color, e.g. `text-content-action-on-strong` (--color-content-action-on-strong). */
|
|
35
|
-
export const COLOR_TEXT_INVERSE = 'text-white';
|
|
36
|
-
/** @deprecated Use `text-content-tertiary` (--color-content-tertiary) instead. */
|
|
37
|
-
export const COLOR_TEXT_PLACEHOLDER = 'text-slate-400';
|
|
38
|
-
/** @deprecated Use `text-content-danger` (--color-content-danger) instead. */
|
|
39
|
-
export const COLOR_TEXT_INVALID = 'text-red-600';
|
|
40
|
-
|
|
41
|
-
// Brand / Action
|
|
42
|
-
/** @deprecated Use `bg-surface-action-strong` (--color-surface-action-strong) instead. */
|
|
43
|
-
export const COLOR_BRAND_DEFAULT = 'bg-slate-900';
|
|
44
|
-
/** @deprecated Use `bg-surface-action-strong-hover` (--color-surface-action-strong-hover) instead. */
|
|
45
|
-
export const COLOR_BRAND_HOVER = 'bg-slate-800';
|
|
46
|
-
/** @deprecated Use `bg-surface-action-strong-active` (--color-surface-action-strong-active) instead. */
|
|
47
|
-
export const COLOR_BRAND_ACTIVE = 'bg-slate-700';
|
|
48
|
-
|
|
49
|
-
// Accent (for checked states, active indicators)
|
|
50
|
-
/** @deprecated Use `bg-surface-action-strong` (--color-surface-action-strong) instead. */
|
|
51
|
-
export const COLOR_ACCENT_DEFAULT = 'bg-slate-900';
|
|
52
|
-
/** @deprecated Use `border-stroke-action` (--color-stroke-action) instead. */
|
|
53
|
-
export const COLOR_ACCENT_BORDER = 'border-slate-900';
|
|
54
|
-
|
|
55
|
-
/**
|
|
56
|
-
* @deprecated Use semantic token classes directly instead. Map each color key to its
|
|
57
|
-
* corresponding `--color-surface-*`, `--color-stroke-*`, and `--color-content-*` tokens:
|
|
58
|
-
* - `bg` → `bg-surface-{color}-strong` (--color-surface-{color}-strong)
|
|
59
|
-
* - `bgHover` → `bg-surface-{color}-strong-hover` (--color-surface-{color}-strong-hover)
|
|
60
|
-
* - `bgActive` → `bg-surface-{color}-strong-active` (--color-surface-{color}-strong-active)
|
|
61
|
-
* - `border` → `border-stroke-{color}` (--color-stroke-{color})
|
|
62
|
-
* - `text` → `text-content-{color}` (--color-content-{color})
|
|
63
|
-
* - `ring` → `ring-[--color-stroke-focus]` (--color-stroke-focus)
|
|
64
|
-
*
|
|
65
|
-
* See Button/styles.ts for a complete migration example.
|
|
66
|
-
*/
|
|
67
|
-
export const SEMANTIC_COLORS = {
|
|
68
|
-
action: {
|
|
69
|
-
bg: 'bg-slate-900',
|
|
70
|
-
bgHover: 'bg-slate-800',
|
|
71
|
-
bgActive: 'bg-slate-700',
|
|
72
|
-
border: 'border-slate-900',
|
|
73
|
-
text: 'text-slate-900',
|
|
74
|
-
ring: 'ring-slate-400/50'
|
|
75
|
-
},
|
|
76
|
-
danger: {
|
|
77
|
-
bg: 'bg-red-600',
|
|
78
|
-
bgHover: 'bg-red-700',
|
|
79
|
-
bgActive: 'bg-red-800',
|
|
80
|
-
border: 'border-red-600',
|
|
81
|
-
text: 'text-red-600',
|
|
82
|
-
ring: 'ring-red-400/50'
|
|
83
|
-
},
|
|
84
|
-
warning: {
|
|
85
|
-
bg: 'bg-amber-500',
|
|
86
|
-
bgHover: 'bg-amber-600',
|
|
87
|
-
bgActive: 'bg-amber-700',
|
|
88
|
-
border: 'border-amber-500',
|
|
89
|
-
text: 'text-amber-600',
|
|
90
|
-
ring: 'ring-amber-400/50'
|
|
91
|
-
},
|
|
92
|
-
success: {
|
|
93
|
-
bg: 'bg-green-600',
|
|
94
|
-
bgHover: 'bg-green-700',
|
|
95
|
-
bgActive: 'bg-green-800',
|
|
96
|
-
border: 'border-green-600',
|
|
97
|
-
text: 'text-green-600',
|
|
98
|
-
ring: 'ring-green-400/50'
|
|
99
|
-
},
|
|
100
|
-
info: {
|
|
101
|
-
bg: 'bg-sky-500',
|
|
102
|
-
bgHover: 'bg-sky-600',
|
|
103
|
-
bgActive: 'bg-sky-700',
|
|
104
|
-
border: 'border-sky-500',
|
|
105
|
-
text: 'text-sky-600',
|
|
106
|
-
ring: 'ring-sky-400/50'
|
|
107
|
-
}
|
|
108
|
-
};
|
|
109
|
-
|
|
110
|
-
// ─── Focus ───────────────────────────────────────────────
|
|
111
|
-
/** @deprecated Use `ring-2 ring-[--color-stroke-focus] ring-offset-2` (--color-stroke-focus) instead. */
|
|
112
|
-
export const FOCUS_RING = 'ring-2 ring-slate-400/50 ring-offset-2';
|
|
113
|
-
|
|
114
|
-
// ─── Radius ──────────────────────────────────────────────
|
|
115
|
-
/** @deprecated Use `rounded-[var(--border-radius-button)]` for buttons/inputs or `rounded-[var(--border-radius-default)]` for containers. */
|
|
116
|
-
export const RADIUS_SM = 'rounded-lg';
|
|
117
|
-
/** @deprecated Use `rounded-[var(--border-radius-default)]` for cards/containers. */
|
|
118
|
-
export const RADIUS_MD = 'rounded-xl';
|
|
119
|
-
/** @deprecated Use `rounded-[var(--border-radius-round)]` for circular elements (icon buttons, radio, pills). */
|
|
120
|
-
export const RADIUS_FULL = 'rounded-full';
|
|
121
|
-
|
|
122
|
-
// ─── Shadows ─────────────────────────────────────────────
|
|
123
|
-
|
|
124
|
-
/** @deprecated Use `shadow-sm` directly instead */
|
|
125
|
-
export const SHADOW_SM = 'shadow-sm';
|
|
126
|
-
/** @deprecated Use `shadow-md` directly instead */
|
|
127
|
-
export const SHADOW_MD = 'shadow-md';
|
|
128
|
-
|
|
129
|
-
// ─── Sizing ──────────────────────────────────────────────
|
|
130
|
-
// Unified size scale for interactive/form components (Button, Input, Select, Checkbox).
|
|
131
|
-
// Only two sizes: 'default' (regular) and 'small' (compact).
|
|
132
|
-
// NOTE: Text and Heading use a separate typography scale (xs/sm/md/lg/xl) — not this.
|
|
133
|
-
/** @deprecated */
|
|
134
|
-
export const SIZE_SCALE = {
|
|
135
|
-
default: {
|
|
136
|
-
height: 'h-10',
|
|
137
|
-
px: 'px-4',
|
|
138
|
-
gap: 'gap-2',
|
|
139
|
-
text: 'text-base'
|
|
140
|
-
},
|
|
141
|
-
small: {
|
|
142
|
-
height: 'h-8',
|
|
143
|
-
px: 'px-3',
|
|
144
|
-
gap: 'gap-1.5',
|
|
145
|
-
text: 'text-sm'
|
|
146
|
-
}
|
|
147
|
-
};
|
|
148
|
-
|
|
149
|
-
// ─── Transitions ─────────────────────────────────────────
|
|
150
|
-
export const TRANSITION_COLORS = 'transition-colors duration-150';
|
|
151
|
-
|
|
152
|
-
// ─── Disabled ────────────────────────────────────────────
|
|
153
|
-
export const DISABLED_OPACITY = 'data-[disabled=true]:opacity-50';
|
|
154
|
-
export const DISABLED_CURSOR = 'data-[disabled=true]:cursor-not-allowed data-[disabled=true]:pointer-events-none';
|
|
155
|
-
//# sourceMappingURL=primitives.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["COLOR_BG_PRIMARY","COLOR_BG_SUBTLE","COLOR_BG_MUTED","COLOR_BG_INVERSE","COLOR_BORDER_DEFAULT","COLOR_BORDER_STRONG","COLOR_BORDER_FOCUS","COLOR_BORDER_INVALID","COLOR_TEXT_PRIMARY","COLOR_TEXT_SECONDARY","COLOR_TEXT_MUTED","COLOR_TEXT_INVERSE","COLOR_TEXT_PLACEHOLDER","COLOR_TEXT_INVALID","COLOR_BRAND_DEFAULT","COLOR_BRAND_HOVER","COLOR_BRAND_ACTIVE","COLOR_ACCENT_DEFAULT","COLOR_ACCENT_BORDER","SEMANTIC_COLORS","action","bg","bgHover","bgActive","border","text","ring","danger","warning","success","info","FOCUS_RING","RADIUS_SM","RADIUS_MD","RADIUS_FULL","SHADOW_SM","SHADOW_MD","SIZE_SCALE","default","height","px","gap","small","TRANSITION_COLORS","DISABLED_OPACITY","DISABLED_CURSOR"],"sourceRoot":"../../../src","sources":["styles/primitives.ts"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/styles/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}
|
|
@@ -1,123 +0,0 @@
|
|
|
1
|
-
/** @deprecated Use `bg-surface-primary` (--color-surface-primary) instead. */
|
|
2
|
-
export declare const COLOR_BG_PRIMARY = "bg-white";
|
|
3
|
-
/** @deprecated Use `bg-surface-secondary` (--color-surface-secondary) instead. */
|
|
4
|
-
export declare const COLOR_BG_SUBTLE = "bg-slate-50";
|
|
5
|
-
/** @deprecated Use `bg-surface-neutral-subtle` (--color-surface-neutral-subtle) instead. */
|
|
6
|
-
export declare const COLOR_BG_MUTED = "bg-slate-100";
|
|
7
|
-
/** @deprecated Use `bg-base-950` (--color-base-950) instead. */
|
|
8
|
-
export declare const COLOR_BG_INVERSE = "bg-slate-900";
|
|
9
|
-
/** @deprecated Use `border-stroke-secondary` (--color-stroke-secondary) instead. */
|
|
10
|
-
export declare const COLOR_BORDER_DEFAULT = "border-slate-200";
|
|
11
|
-
/** @deprecated Use `border-stroke-hover` (--color-stroke-hover) instead. */
|
|
12
|
-
export declare const COLOR_BORDER_STRONG = "border-slate-300";
|
|
13
|
-
/** @deprecated Use `border-stroke-focus` (--color-stroke-focus) instead. */
|
|
14
|
-
export declare const COLOR_BORDER_FOCUS = "border-slate-900";
|
|
15
|
-
/** @deprecated Use `border-stroke-danger` (--color-stroke-danger) instead. */
|
|
16
|
-
export declare const COLOR_BORDER_INVALID = "border-red-500";
|
|
17
|
-
/** @deprecated Use `text-content-primary` (--color-content-primary) instead. */
|
|
18
|
-
export declare const COLOR_TEXT_PRIMARY = "text-slate-900";
|
|
19
|
-
/** @deprecated Use `text-content-secondary` (--color-content-secondary) instead. */
|
|
20
|
-
export declare const COLOR_TEXT_SECONDARY = "text-slate-500";
|
|
21
|
-
/** @deprecated Use `text-content-tertiary` (--color-content-tertiary) instead. */
|
|
22
|
-
export declare const COLOR_TEXT_MUTED = "text-slate-400";
|
|
23
|
-
/** @deprecated Use the appropriate `text-content-*-on-strong` token for the surface color, e.g. `text-content-action-on-strong` (--color-content-action-on-strong). */
|
|
24
|
-
export declare const COLOR_TEXT_INVERSE = "text-white";
|
|
25
|
-
/** @deprecated Use `text-content-tertiary` (--color-content-tertiary) instead. */
|
|
26
|
-
export declare const COLOR_TEXT_PLACEHOLDER = "text-slate-400";
|
|
27
|
-
/** @deprecated Use `text-content-danger` (--color-content-danger) instead. */
|
|
28
|
-
export declare const COLOR_TEXT_INVALID = "text-red-600";
|
|
29
|
-
/** @deprecated Use `bg-surface-action-strong` (--color-surface-action-strong) instead. */
|
|
30
|
-
export declare const COLOR_BRAND_DEFAULT = "bg-slate-900";
|
|
31
|
-
/** @deprecated Use `bg-surface-action-strong-hover` (--color-surface-action-strong-hover) instead. */
|
|
32
|
-
export declare const COLOR_BRAND_HOVER = "bg-slate-800";
|
|
33
|
-
/** @deprecated Use `bg-surface-action-strong-active` (--color-surface-action-strong-active) instead. */
|
|
34
|
-
export declare const COLOR_BRAND_ACTIVE = "bg-slate-700";
|
|
35
|
-
/** @deprecated Use `bg-surface-action-strong` (--color-surface-action-strong) instead. */
|
|
36
|
-
export declare const COLOR_ACCENT_DEFAULT = "bg-slate-900";
|
|
37
|
-
/** @deprecated Use `border-stroke-action` (--color-stroke-action) instead. */
|
|
38
|
-
export declare const COLOR_ACCENT_BORDER = "border-slate-900";
|
|
39
|
-
/**
|
|
40
|
-
* @deprecated Use semantic token classes directly instead. Map each color key to its
|
|
41
|
-
* corresponding `--color-surface-*`, `--color-stroke-*`, and `--color-content-*` tokens:
|
|
42
|
-
* - `bg` → `bg-surface-{color}-strong` (--color-surface-{color}-strong)
|
|
43
|
-
* - `bgHover` → `bg-surface-{color}-strong-hover` (--color-surface-{color}-strong-hover)
|
|
44
|
-
* - `bgActive` → `bg-surface-{color}-strong-active` (--color-surface-{color}-strong-active)
|
|
45
|
-
* - `border` → `border-stroke-{color}` (--color-stroke-{color})
|
|
46
|
-
* - `text` → `text-content-{color}` (--color-content-{color})
|
|
47
|
-
* - `ring` → `ring-[--color-stroke-focus]` (--color-stroke-focus)
|
|
48
|
-
*
|
|
49
|
-
* See Button/styles.ts for a complete migration example.
|
|
50
|
-
*/
|
|
51
|
-
export declare const SEMANTIC_COLORS: {
|
|
52
|
-
readonly action: {
|
|
53
|
-
readonly bg: "bg-slate-900";
|
|
54
|
-
readonly bgHover: "bg-slate-800";
|
|
55
|
-
readonly bgActive: "bg-slate-700";
|
|
56
|
-
readonly border: "border-slate-900";
|
|
57
|
-
readonly text: "text-slate-900";
|
|
58
|
-
readonly ring: "ring-slate-400/50";
|
|
59
|
-
};
|
|
60
|
-
readonly danger: {
|
|
61
|
-
readonly bg: "bg-red-600";
|
|
62
|
-
readonly bgHover: "bg-red-700";
|
|
63
|
-
readonly bgActive: "bg-red-800";
|
|
64
|
-
readonly border: "border-red-600";
|
|
65
|
-
readonly text: "text-red-600";
|
|
66
|
-
readonly ring: "ring-red-400/50";
|
|
67
|
-
};
|
|
68
|
-
readonly warning: {
|
|
69
|
-
readonly bg: "bg-amber-500";
|
|
70
|
-
readonly bgHover: "bg-amber-600";
|
|
71
|
-
readonly bgActive: "bg-amber-700";
|
|
72
|
-
readonly border: "border-amber-500";
|
|
73
|
-
readonly text: "text-amber-600";
|
|
74
|
-
readonly ring: "ring-amber-400/50";
|
|
75
|
-
};
|
|
76
|
-
readonly success: {
|
|
77
|
-
readonly bg: "bg-green-600";
|
|
78
|
-
readonly bgHover: "bg-green-700";
|
|
79
|
-
readonly bgActive: "bg-green-800";
|
|
80
|
-
readonly border: "border-green-600";
|
|
81
|
-
readonly text: "text-green-600";
|
|
82
|
-
readonly ring: "ring-green-400/50";
|
|
83
|
-
};
|
|
84
|
-
readonly info: {
|
|
85
|
-
readonly bg: "bg-sky-500";
|
|
86
|
-
readonly bgHover: "bg-sky-600";
|
|
87
|
-
readonly bgActive: "bg-sky-700";
|
|
88
|
-
readonly border: "border-sky-500";
|
|
89
|
-
readonly text: "text-sky-600";
|
|
90
|
-
readonly ring: "ring-sky-400/50";
|
|
91
|
-
};
|
|
92
|
-
};
|
|
93
|
-
/** @deprecated Use `ring-2 ring-[--color-stroke-focus] ring-offset-2` (--color-stroke-focus) instead. */
|
|
94
|
-
export declare const FOCUS_RING = "ring-2 ring-slate-400/50 ring-offset-2";
|
|
95
|
-
/** @deprecated Use `rounded-[var(--border-radius-button)]` for buttons/inputs or `rounded-[var(--border-radius-default)]` for containers. */
|
|
96
|
-
export declare const RADIUS_SM = "rounded-lg";
|
|
97
|
-
/** @deprecated Use `rounded-[var(--border-radius-default)]` for cards/containers. */
|
|
98
|
-
export declare const RADIUS_MD = "rounded-xl";
|
|
99
|
-
/** @deprecated Use `rounded-[var(--border-radius-round)]` for circular elements (icon buttons, radio, pills). */
|
|
100
|
-
export declare const RADIUS_FULL = "rounded-full";
|
|
101
|
-
/** @deprecated Use `shadow-sm` directly instead */
|
|
102
|
-
export declare const SHADOW_SM = "shadow-sm";
|
|
103
|
-
/** @deprecated Use `shadow-md` directly instead */
|
|
104
|
-
export declare const SHADOW_MD = "shadow-md";
|
|
105
|
-
/** @deprecated */
|
|
106
|
-
export declare const SIZE_SCALE: {
|
|
107
|
-
readonly default: {
|
|
108
|
-
readonly height: "h-10";
|
|
109
|
-
readonly px: "px-4";
|
|
110
|
-
readonly gap: "gap-2";
|
|
111
|
-
readonly text: "text-base";
|
|
112
|
-
};
|
|
113
|
-
readonly small: {
|
|
114
|
-
readonly height: "h-8";
|
|
115
|
-
readonly px: "px-3";
|
|
116
|
-
readonly gap: "gap-1.5";
|
|
117
|
-
readonly text: "text-sm";
|
|
118
|
-
};
|
|
119
|
-
};
|
|
120
|
-
export declare const TRANSITION_COLORS = "transition-colors duration-150";
|
|
121
|
-
export declare const DISABLED_OPACITY = "data-[disabled=true]:opacity-50";
|
|
122
|
-
export declare const DISABLED_CURSOR = "data-[disabled=true]:cursor-not-allowed data-[disabled=true]:pointer-events-none";
|
|
123
|
-
//# sourceMappingURL=primitives.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"primitives.d.ts","sourceRoot":"","sources":["../../../src/styles/primitives.ts"],"names":[],"mappings":"AAKA,8EAA8E;AAC9E,eAAO,MAAM,gBAAgB,aAAa,CAAC;AAC3C,kFAAkF;AAClF,eAAO,MAAM,eAAe,gBAAgB,CAAC;AAC7C,4FAA4F;AAC5F,eAAO,MAAM,cAAc,iBAAiB,CAAC;AAC7C,gEAAgE;AAChE,eAAO,MAAM,gBAAgB,iBAAiB,CAAC;AAG/C,oFAAoF;AACpF,eAAO,MAAM,oBAAoB,qBAAqB,CAAC;AACvD,4EAA4E;AAC5E,eAAO,MAAM,mBAAmB,qBAAqB,CAAC;AACtD,4EAA4E;AAC5E,eAAO,MAAM,kBAAkB,qBAAqB,CAAC;AACrD,8EAA8E;AAC9E,eAAO,MAAM,oBAAoB,mBAAmB,CAAC;AAGrD,gFAAgF;AAChF,eAAO,MAAM,kBAAkB,mBAAmB,CAAC;AACnD,oFAAoF;AACpF,eAAO,MAAM,oBAAoB,mBAAmB,CAAC;AACrD,kFAAkF;AAClF,eAAO,MAAM,gBAAgB,mBAAmB,CAAC;AACjD,uKAAuK;AACvK,eAAO,MAAM,kBAAkB,eAAe,CAAC;AAC/C,kFAAkF;AAClF,eAAO,MAAM,sBAAsB,mBAAmB,CAAC;AACvD,8EAA8E;AAC9E,eAAO,MAAM,kBAAkB,iBAAiB,CAAC;AAGjD,0FAA0F;AAC1F,eAAO,MAAM,mBAAmB,iBAAiB,CAAC;AAClD,sGAAsG;AACtG,eAAO,MAAM,iBAAiB,iBAAiB,CAAC;AAChD,wGAAwG;AACxG,eAAO,MAAM,kBAAkB,iBAAiB,CAAC;AAGjD,0FAA0F;AAC1F,eAAO,MAAM,oBAAoB,iBAAiB,CAAC;AACnD,8EAA8E;AAC9E,eAAO,MAAM,mBAAmB,qBAAqB,CAAC;AAEtD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyClB,CAAC;AAGX,yGAAyG;AACzG,eAAO,MAAM,UAAU,2CAA2C,CAAC;AAGnE,6IAA6I;AAC7I,eAAO,MAAM,SAAS,eAAe,CAAC;AACtC,qFAAqF;AACrF,eAAO,MAAM,SAAS,eAAe,CAAC;AACtC,iHAAiH;AACjH,eAAO,MAAM,WAAW,iBAAiB,CAAC;AAI1C,mDAAmD;AACnD,eAAO,MAAM,SAAS,cAAc,CAAC;AACrC,mDAAmD;AACnD,eAAO,MAAM,SAAS,cAAc,CAAC;AAMrC,kBAAkB;AAClB,eAAO,MAAM,UAAU;;;;;;;;;;;;;CAGb,CAAC;AAGX,eAAO,MAAM,iBAAiB,mCAAmC,CAAC;AAGlE,eAAO,MAAM,gBAAgB,oCAAoC,CAAC;AAClE,eAAO,MAAM,eAAe,qFACwD,CAAC"}
|
package/src/styles/index.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './primitives';
|