@ibis-design/css 1.0.0-alpha.0 → 1.0.0-alpha.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 (8) hide show
  1. package/dist/components/card.css +32 -1
  2. package/dist/components/cardLayout.css +30 -8
  3. package/dist/components/dashboardLayout.css +1 -1
  4. package/dist/components/pillTab.css +2 -2
  5. package/dist/components/pillTabWrapper.css +8 -0
  6. package/dist/components/topBar.css +2 -2
  7. package/dist/design-tokens.css +1 -1
  8. package/package.json +5 -2
package/dist/components/card.css CHANGED
@@ -7,8 +7,9 @@
7
7
  border: var(--border-width-thin) solid var(--border-color-subtle);
8
8
  border-radius: var(--border-radius-lg);
9
9
  box-shadow: var(--shadow-elevation-sm);
10
- overflow: hidden;
10
+ overflow: visible;
11
11
  box-sizing: border-box;
12
+ min-height: 200px;
12
13
  }
13
14
 
14
15
  .ibis-card__header {
@@ -53,3 +54,33 @@
53
54
  padding-top: var(--spacing-3);
54
55
  margin-top: var(--spacing-2);
55
56
  }
57
+
58
+ /* ===== SIZE VARIANTS ===== */
59
+
60
+ .ibis-card--sm {
61
+ min-height: 120px;
62
+ }
63
+
64
+ .ibis-card--md {
65
+ min-height: 200px;
66
+ }
67
+
68
+ .ibis-card--md-wide {
69
+ min-height: 200px;
70
+ }
71
+
72
+ .ibis-card--lg {
73
+ min-height: 320px;
74
+ }
75
+
76
+ .ibis-card--lg-wide {
77
+ min-height: 320px;
78
+ }
79
+
80
+ .ibis-card--ex-wide {
81
+ min-height: 200px;
82
+ }
83
+
84
+ .ibis-card--full {
85
+ min-height: 400px;
86
+ }
package/dist/components/cardLayout.css CHANGED
@@ -43,29 +43,51 @@
43
43
  flex-shrink: 0;
44
44
  }
45
45
 
46
+ /* Default — 1 column (mobile) */
46
47
  .ibis-card-layout__grid {
47
48
  display: grid;
48
49
  gap: var(--spacing-4);
49
50
  grid-template-columns: 1fr;
50
51
  }
51
52
 
52
- /* sm — 2 columns */
53
+ /* sm (640px) — 2 columns (tablet) */
53
54
  @media (min-width: 640px) {
54
55
  .ibis-card-layout__grid {
55
56
  grid-template-columns: repeat(2, 1fr);
56
57
  }
57
58
  }
58
59
 
59
- /* lg — 3 columns */
60
+ /* lg (1024px) — 4 columns (desktop), card size props apply */
60
61
  @media (min-width: 1024px) {
61
62
  .ibis-card-layout__grid {
62
- grid-template-columns: repeat(3, 1fr);
63
+ grid-template-columns: repeat(4, 1fr);
63
64
  }
64
- }
65
65
 
66
- /* xl — 4 columns */
67
- @media (min-width: 1280px) {
68
- .ibis-card-layout__grid {
69
- grid-template-columns: repeat(4, 1fr);
66
+ .ibis-card-layout__grid .ibis-card--sm {
67
+ grid-column: span 1;
68
+ }
69
+
70
+ .ibis-card-layout__grid .ibis-card--md {
71
+ grid-column: span 2;
72
+ }
73
+
74
+ .ibis-card-layout__grid .ibis-card--md-wide {
75
+ grid-column: span 3;
76
+ }
77
+
78
+ .ibis-card-layout__grid .ibis-card--lg {
79
+ grid-column: span 2;
80
+ }
81
+
82
+ .ibis-card-layout__grid .ibis-card--lg-wide {
83
+ grid-column: span 3;
84
+ }
85
+
86
+ .ibis-card-layout__grid .ibis-card--ex-wide {
87
+ grid-column: span 4;
88
+ }
89
+
90
+ .ibis-card-layout__grid .ibis-card--full {
91
+ grid-column: span 4;
70
92
  }
71
93
  }
package/dist/components/dashboardLayout.css CHANGED
@@ -87,6 +87,6 @@
87
87
  }
88
88
 
89
89
  .ib-dashboard-layout__main {
90
- padding-bottom: calc(var(--spacing-6) + 64px);
90
+ padding-bottom: calc(var(--spacing-6) + 56px);
91
91
  }
92
92
  }
package/dist/components/pillTab.css CHANGED
@@ -3,7 +3,7 @@
3
3
  align-items: center;
4
4
  justify-content: center;
5
5
  flex: 1;
6
- padding: var(--spacing-1) var(--spacing-3);
6
+ padding: var(--spacing-2) var(--spacing-5);
7
7
  height: 100%;
8
8
  align-self: stretch;
9
9
  border-radius: var(--border-radius-full);
@@ -22,7 +22,7 @@
22
22
  }
23
23
 
24
24
  .ibis-pill-tab__content {
25
- font-size: var(--font-size-body-sm);
25
+ font-size: var(--font-size-body-md);
26
26
  line-height: 1;
27
27
  text-align: center;
28
28
  width: 100%;
package/dist/components/pillTabWrapper.css ADDED
@@ -0,0 +1,8 @@
1
+ .ibis-pill-tabs {
2
+ display: inline-flex;
3
+ align-items: stretch;
4
+ border-radius: var(--border-radius-full);
5
+ background: var(--color-surface-default);
6
+ padding: var(--spacing-1);
7
+ gap: var(--spacing-1);
8
+ }
package/dist/components/topBar.css CHANGED
@@ -3,15 +3,15 @@
3
3
  .ib-top-bar {
4
4
  position: relative;
5
5
  width: 100%;
6
- height: 96px;
6
+ height: 64px;
7
7
  display: flex;
8
8
  flex-direction: row;
9
9
  align-items: center;
10
10
  justify-content: space-between;
11
11
  background-color: var(--color-surface-default);
12
12
  border-bottom: var(--border-width-thin) solid var(--border-color-subtle);
13
+ border-radius: 0 0 var(--border-radius-lg) 0;
13
14
  box-shadow: 0 1px 8px 0 var(--shadow-color-black-soft);
14
- z-index: var(--z-index-sticky);
15
15
  box-sizing: border-box;
16
16
  padding: 0 var(--spacing-6);
17
17
  gap: var(--spacing-4);
package/dist/design-tokens.css CHANGED
@@ -321,7 +321,7 @@
321
321
  --color-surface-subtle: var(--color-primary-900);
322
322
  --color-surface-elevated: var(--color-neutral-800);
323
323
  --color-surface-inverse: var(--color-neutral-100);
324
- --color-surface-disabled: var(--color-neutral-800);
324
+ --color-surface-disabled: var(--color-neutral-700);
325
325
  --color-text-primary: var(--color-white);
326
326
  --color-text-secondary: var(--color-neutral-300);
327
327
  --color-text-muted: var(--color-neutral-400);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ibis-design/css",
3
- "version": "1.0.0-alpha.0",
3
+ "version": "1.0.0-alpha.1",
4
4
  "description": "Design tokens, CSS variables, and Tailwind preset for the IBIS design system.",
5
5
  "type": "module",
6
6
  "exports": {
@@ -28,7 +28,10 @@
28
28
  },
29
29
  "devDependencies": {
30
30
  "sd-tailwindcss-transformer": "^2.2.1",
31
- "style-dictionary": "^5.4.3",
31
+ "style-dictionary": "^5.4.4",
32
32
  "tsx": "^4.22.4"
33
+ },
34
+ "dependencies": {
35
+ "@ibis-design/css": "^1.0.0-alpha.0"
33
36
  }
34
37
  }