@rokkit/themes 1.0.0-next.128 → 1.0.0-next.129

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 (8) hide show
  1. package/package.json +2 -2
  2. package/src/base/breadcrumbs.css +1 -0
  3. package/src/base/graph-paper.css +83 -0
  4. package/src/base/index.css +1 -0
  5. package/src/glass/card.css +63 -0
  6. package/src/material/card.css +61 -0
  7. package/src/minimal/card.css +59 -0
  8. package/src/rokkit/card.css +62 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rokkit/themes",
3
- "version": "1.0.0-next.128",
3
+ "version": "1.0.0-next.129",
4
4
  "description": "Theme styles for @rokkit/ui components",
5
5
  "type": "module",
6
6
  "main": "./src/index.js",
@@ -37,7 +37,7 @@
37
37
  "build": "bun run build.mjs"
38
38
  },
39
39
  "dependencies": {
40
- "@rokkit/core": "1.0.0-next.128"
40
+ "@rokkit/core": "1.0.0-next.129"
41
41
  },
42
42
  "devDependencies": {
43
43
  "magic-string": "^0.30.21",
package/src/base/breadcrumbs.css CHANGED
@@ -35,6 +35,7 @@
35
35
  border-radius: 0.25rem;
36
36
  font: inherit;
37
37
  color: inherit;
38
+ text-decoration: none;
38
39
  }
39
40
 
40
41
  [data-breadcrumb-current] {
package/src/base/graph-paper.css ADDED
@@ -0,0 +1,83 @@
1
+ /* Graph paper — minor + major grid background utility
2
+ *
3
+ * Override any variable on the element or a parent to customise:
4
+ * --unit minor cell size (default 0.5rem)
5
+ * --size major cell size (default calc(5 * --unit))
6
+ * --minor-grid minor line thickness (default 0.5px)
7
+ * --major-grid major line thickness (default 0.5px)
8
+ * --graph-paper-color line color (default currentColor)
9
+ */
10
+
11
+ /* Grid paper — simple H+V grid (no major/minor distinction)
12
+ *
13
+ * Override any variable on the element or a parent to customise:
14
+ * --unit cell size (default 0.5rem)
15
+ * --grid-line line thickness (default 0.5px)
16
+ * --grid-paper-color line color (default currentColor)
17
+ */
18
+
19
+ /* Ruled paper — horizontal lines only
20
+ *
21
+ * Override any variable on the element or a parent to customise:
22
+ * --unit line spacing (default 1.5rem)
23
+ * --rule-size line thickness (default 0.5px)
24
+ * --ruled-paper-color line color (default currentColor)
25
+ */
26
+
27
+ [data-graph-paper] {
28
+ background-image:
29
+ linear-gradient(
30
+ var(--graph-paper-color, currentColor) var(--major-grid, 0.5px),
31
+ transparent var(--major-grid, 0.5px)
32
+ ),
33
+ linear-gradient(
34
+ 90deg,
35
+ var(--graph-paper-color, currentColor) var(--major-grid, 0.5px),
36
+ transparent var(--major-grid, 0.5px)
37
+ ),
38
+ linear-gradient(
39
+ var(--graph-paper-color, currentColor) var(--minor-grid, 0.5px),
40
+ transparent var(--minor-grid, 0.5px)
41
+ ),
42
+ linear-gradient(
43
+ 90deg,
44
+ var(--graph-paper-color, currentColor) var(--minor-grid, 0.5px),
45
+ transparent var(--minor-grid, 0.5px)
46
+ );
47
+ background-size:
48
+ var(--size, calc(5 * var(--unit, 0.5rem))) var(--size, calc(5 * var(--unit, 0.5rem))),
49
+ var(--size, calc(5 * var(--unit, 0.5rem))) var(--size, calc(5 * var(--unit, 0.5rem))),
50
+ var(--unit, 0.5rem) var(--unit, 0.5rem),
51
+ var(--unit, 0.5rem) var(--unit, 0.5rem);
52
+ background-position:
53
+ calc(-1 * var(--minor-grid, 0.5px)) calc(-1 * var(--minor-grid, 0.5px)),
54
+ calc(-1 * var(--minor-grid, 0.5px)) calc(-1 * var(--minor-grid, 0.5px)),
55
+ calc(-1 * var(--minor-grid, 0.5px)) calc(-1 * var(--minor-grid, 0.5px)),
56
+ calc(-1 * var(--minor-grid, 0.5px)) calc(-1 * var(--minor-grid, 0.5px));
57
+ }
58
+
59
+ [data-grid-paper] {
60
+ background-image:
61
+ linear-gradient(
62
+ var(--grid-paper-color, currentColor) var(--grid-line, 0.5px),
63
+ transparent var(--grid-line, 0.5px)
64
+ ),
65
+ linear-gradient(
66
+ 90deg,
67
+ var(--grid-paper-color, currentColor) var(--grid-line, 0.5px),
68
+ transparent var(--grid-line, 0.5px)
69
+ );
70
+ background-size: var(--unit, 0.5rem) var(--unit, 0.5rem);
71
+ background-position:
72
+ calc(-1 * var(--grid-line, 0.5px)) calc(-1 * var(--grid-line, 0.5px)),
73
+ calc(-1 * var(--grid-line, 0.5px)) calc(-1 * var(--grid-line, 0.5px));
74
+ }
75
+
76
+ [data-ruled-paper] {
77
+ background-image: linear-gradient(
78
+ var(--ruled-paper-color, currentColor) var(--rule-size, 0.5px),
79
+ transparent var(--rule-size, 0.5px)
80
+ );
81
+ background-size: 100% var(--unit, 1.5rem);
82
+ background-position: 0 calc(-1 * var(--rule-size, 0.5px));
83
+ }
package/src/base/index.css CHANGED
@@ -33,6 +33,7 @@
33
33
  @import './range.css';
34
34
  @import './timeline.css';
35
35
  @import './reveal.css';
36
+ @import './graph-paper.css';
36
37
  @import './floating-navigation.css';
37
38
  @import './grid.css';
38
39
  @import './upload-target.css';
package/src/glass/card.css ADDED
@@ -0,0 +1,63 @@
1
+ /**
2
+ * Card - Glass Theme Styles
3
+ *
4
+ * Glassmorphism styling with blur and transparency.
5
+ */
6
+
7
+ /* =============================================================================
8
+ Base Card Styles
9
+ ============================================================================= */
10
+
11
+ [data-style='glass'] [data-card] {
12
+ @apply backdrop-blur-md border shadow-lg bg-surface-z2/60 border-surface-z5/20 text-surface-z9;
13
+ }
14
+
15
+ /* Interactive cards (buttons) */
16
+ [data-style='glass'] [data-card][data-card-interactive] {
17
+ cursor: pointer;
18
+ transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
19
+ }
20
+
21
+ [data-style='glass'] [data-card][data-card-interactive]:hover {
22
+ @apply shadow-xl bg-surface-z2/80;
23
+ transform: translateY(-2px);
24
+ }
25
+
26
+ [data-style='glass'] [data-card][data-card-interactive]:active {
27
+ @apply shadow-lg;
28
+ transform: translateY(0);
29
+ }
30
+
31
+ /* =============================================================================
32
+ Card Sections
33
+ ============================================================================= */
34
+
35
+ [data-style='glass'] [data-card-header] {
36
+ @apply border-surface-z5/20 border-b;
37
+ }
38
+
39
+ [data-style='glass'] [data-card-body] {
40
+ @apply text-surface-z8;
41
+ }
42
+
43
+ [data-style='glass'] [data-card-footer] {
44
+ @apply border-surface-z5/20 border-t text-surface-z7;
45
+ }
46
+
47
+ /* =============================================================================
48
+ Focus States
49
+ ============================================================================= */
50
+
51
+ [data-style='glass'] [data-card][data-card-interactive]:focus-visible {
52
+ @apply outline-none ring-2 ring-surface-z5/40;
53
+ }
54
+
55
+ /* =============================================================================
56
+ Disabled State
57
+ ============================================================================= */
58
+
59
+ [data-style='glass'] [data-card][data-card-interactive][data-disabled],
60
+ [data-style='glass'] [data-card][data-card-interactive]:disabled {
61
+ @apply opacity-50 cursor-not-allowed;
62
+ transform: none;
63
+ }
package/src/material/card.css ADDED
@@ -0,0 +1,61 @@
1
+ * Card - Material Theme Styles
2
+ *
3
+ * Material Design inspired with elevation and shadows.
4
+ */
5
+
6
+ /* =============================================================================
7
+ Base Card Styles
8
+ ============================================================================= */
9
+
10
+ [data-style='material'] [data-card] {
11
+ @apply bg-surface-z1 border-surface-z4 text-surface-z9 border shadow-sm;
12
+ }
13
+
14
+ /* Interactive cards (buttons) */
15
+ [data-style='material'] [data-card][data-card-interactive] {
16
+ cursor: pointer;
17
+ transition:
18
+ box-shadow 0.2s ease,
19
+ transform 0.2s ease;
20
+ }
21
+
22
+ [data-style='material'] [data-card][data-card-interactive]:hover {
23
+ @apply shadow-md;
24
+ }
25
+
26
+ [data-style='material'] [data-card][data-card-interactive]:active {
27
+ @apply shadow-sm;
28
+ }
29
+
30
+ /* =============================================================================
31
+ Card Sections
32
+ ============================================================================= */
33
+
34
+ [data-style='material'] [data-card-header] {
35
+ @apply border-surface-z3 border-b;
36
+ }
37
+
38
+ [data-style='material'] [data-card-body] {
39
+ @apply text-surface-z8;
40
+ }
41
+
42
+ [data-style='material'] [data-card-footer] {
43
+ @apply border-surface-z3 text-surface-z7 border-t;
44
+ }
45
+
46
+ /* =============================================================================
47
+ Focus States
48
+ ============================================================================= */
49
+
50
+ [data-style='material'] [data-card][data-card-interactive]:focus-visible {
51
+ @apply ring-primary-z4 outline-none ring-2 ring-offset-2;
52
+ }
53
+
54
+ /* =============================================================================
55
+ Disabled State
56
+ ============================================================================= */
57
+
58
+ [data-style='material'] [data-card][data-card-interactive][data-disabled],
59
+ [data-style='material'] [data-card][data-card-interactive]:disabled {
60
+ @apply cursor-not-allowed opacity-50 shadow-none;
61
+ }
package/src/minimal/card.css ADDED
@@ -0,0 +1,59 @@
1
+ * Card - Minimal Theme Styles
2
+ *
3
+ * Clean, flat styling with subtle borders.
4
+ */
5
+
6
+ /* =============================================================================
7
+ Base Card Styles
8
+ ============================================================================= */
9
+
10
+ [data-style='minimal'] [data-card] {
11
+ @apply bg-surface-z1 border-surface-z4 text-surface-z9 border shadow-sm;
12
+ }
13
+
14
+ /* Interactive cards (buttons) */
15
+ [data-style='minimal'] [data-card][data-card-interactive] {
16
+ cursor: pointer;
17
+ transition: border-color 0.2s ease, box-shadow 0.2s ease;
18
+ }
19
+
20
+ [data-style='minimal'] [data-card][data-card-interactive]:hover {
21
+ @apply border-surface-z6 shadow;
22
+ }
23
+
24
+ [data-style='minimal'] [data-card][data-card-interactive]:active {
25
+ @apply bg-surface-z2;
26
+ }
27
+
28
+ /* =============================================================================
29
+ Card Sections
30
+ ============================================================================= */
31
+
32
+ [data-style='minimal'] [data-card-header] {
33
+ @apply border-surface-z3 border-b;
34
+ }
35
+
36
+ [data-style='minimal'] [data-card-body] {
37
+ @apply text-surface-z8;
38
+ }
39
+
40
+ [data-style='minimal'] [data-card-footer] {
41
+ @apply border-surface-z3 border-t text-surface-z7;
42
+ }
43
+
44
+ /* =============================================================================
45
+ Focus States
46
+ ============================================================================= */
47
+
48
+ [data-style='minimal'] [data-card][data-card-interactive]:focus-visible {
49
+ @apply outline-none ring-1 ring-surface-z5;
50
+ }
51
+
52
+ /* =============================================================================
53
+ Disabled State
54
+ ============================================================================= */
55
+
56
+ [data-style='minimal'] [data-card][data-card-interactive][data-disabled],
57
+ [data-style='minimal'] [data-card][data-card-interactive]:disabled {
58
+ @apply opacity-50 cursor-not-allowed;
59
+ }
package/src/rokkit/card.css ADDED
@@ -0,0 +1,62 @@
1
+ * Card - Rokkit Theme Styles
2
+ *
3
+ * Rich gradients, elevated shadows, and vibrant surface styling.
4
+ */
5
+
6
+ /* =============================================================================
7
+ Base Card Styles
8
+ ============================================================================= */
9
+
10
+ [data-style='rokkit'] [data-card] {
11
+ @apply from-surface-z2 to-surface-z1 border-surface-z5 text-surface-z9 border bg-gradient-to-b shadow-lg;
12
+ }
13
+
14
+ /* Interactive cards (buttons) */
15
+ [data-style='rokkit'] [data-card][data-card-interactive] {
16
+ cursor: pointer;
17
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
18
+ }
19
+
20
+ [data-style='rokkit'] [data-card][data-card-interactive]:hover {
21
+ @apply shadow-xl;
22
+ transform: translateY(-2px);
23
+ }
24
+
25
+ [data-style='rokkit'] [data-card][data-card-interactive]:active {
26
+ @apply shadow-lg;
27
+ transform: translateY(0);
28
+ }
29
+
30
+ /* =============================================================================
31
+ Card Sections
32
+ ============================================================================= */
33
+
34
+ [data-style='rokkit'] [data-card-header] {
35
+ @apply border-surface-z4 border-b;
36
+ }
37
+
38
+ [data-style='rokkit'] [data-card-body] {
39
+ @apply text-surface-z8;
40
+ }
41
+
42
+ [data-style='rokkit'] [data-card-footer] {
43
+ @apply border-surface-z4 border-t text-surface-z7;
44
+ }
45
+
46
+ /* =============================================================================
47
+ Focus States
48
+ ============================================================================= */
49
+
50
+ [data-style='rokkit'] [data-card][data-card-interactive]:focus-visible {
51
+ @apply ring-primary-z5 ring-2 outline-none;
52
+ }
53
+
54
+ /* =============================================================================
55
+ Disabled State
56
+ ============================================================================= */
57
+
58
+ [data-style='rokkit'] [data-card][data-card-interactive][data-disabled],
59
+ [data-style='rokkit'] [data-card][data-card-interactive]:disabled {
60
+ @apply opacity-50 cursor-not-allowed;
61
+ transform: none;
62
+ }