@bi-digital/css 0.6.4 → 0.6.6

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 (7) hide show
  1. package/dist/components/button.css +3 -3
  2. package/dist/components/popover.css +32 -0
  3. package/dist/components.css +35 -3
  4. package/dist/index.css +6 -6
  5. package/dist/salesforce.css +41 -9
  6. package/dist/tokens.css +6 -6
  7. package/package.json +2 -2
package/dist/components/button.css CHANGED
@@ -1,6 +1,6 @@
1
1
  .bi-button {
2
2
  --bic-button-box-shadow: none;
3
- --bic-button-icon-size: var(--bi-scale-6x);
3
+ --bic-button-icon-size: var(--bi-icon-medium);
4
4
  --bic-button-padding: .625rem calc(var(--bi-scale-6x) + var(--bi-scale-0-50x));
5
5
  --bic-button-size: var(--bi-scale-11x);
6
6
  --bic-button-font-size: 1rem;
@@ -68,13 +68,13 @@
68
68
  --bic-button-font-size: .875rem;
69
69
  --bic-button-line-height: 1.25rem;
70
70
  --bic-button-padding: var(--bi-scale-1-5x) calc(var(--bi-scale-3x) + var(--bi-scale-0-50x));
71
- --bic-button-icon-size: var(--bi-scale-4x);
71
+ --bic-button-icon-size: var(--bi-icon-small);
72
72
  --bic-button-size: var(--bi-scale-8x);
73
73
  }
74
74
 
75
75
  .bi-button[data-size="large"] {
76
76
  --bic-button-padding: var(--bi-scale-2x) calc(var(--bi-scale-9x) + var(--bi-scale-0-50x));
77
- --bic-button-icon-size: var(--bi-scale-8x);
77
+ --bic-button-icon-size: var(--bi-icon-large);
78
78
  --bic-button-size: var(--bi-scale-14x);
79
79
  }
80
80
 
package/dist/components/popover.css CHANGED
@@ -1,4 +1,5 @@
1
1
  .bi-popover {
2
+ --bic-popover-arrow-size: var(--bi-scale-3x);
2
3
  --bic-popover-background: var(--bi-basic-white);
3
4
  --bic-popover-border-width: var(--bi-stroke-thin);
4
5
  --bic-popover-border-style: solid;
@@ -42,6 +43,37 @@
42
43
  display: block;
43
44
  }
44
45
 
46
+ .bi-popover[data-arrow="true"]:before {
47
+ background: var(--bic-popover-background);
48
+ border: inherit;
49
+ box-sizing: border-box;
50
+ content: "";
51
+ height: var(--bic-popover-arrow-size);
52
+ left: var(--bic-popover-arrow-x);
53
+ top: var(--bic-popover-arrow-y);
54
+ width: var(--bic-popover-arrow-size);
55
+ border-top-color: #0000;
56
+ border-left-color: #0000;
57
+ position: absolute;
58
+ translate: -50% -50%;
59
+ }
60
+
61
+ .bi-popover[data-arrow="true"][data-placement="top"]:before {
62
+ rotate: 45deg;
63
+ }
64
+
65
+ .bi-popover[data-arrow="true"][data-placement="left"]:before {
66
+ rotate: -45deg;
67
+ }
68
+
69
+ .bi-popover[data-arrow="true"][data-placement="right"]:before {
70
+ rotate: 135deg;
71
+ }
72
+
73
+ .bi-popover[data-arrow="true"][data-placement="bottom"]:before {
74
+ rotate: -135deg;
75
+ }
76
+
45
77
  [data-popover="inline"] {
46
78
  all: unset;
47
79
  cursor: pointer;
package/dist/components.css CHANGED
@@ -341,7 +341,7 @@
341
341
 
342
342
  .bi-button {
343
343
  --bic-button-box-shadow: none;
344
- --bic-button-icon-size: var(--bi-scale-6x);
344
+ --bic-button-icon-size: var(--bi-icon-medium);
345
345
  --bic-button-padding: .625rem calc(var(--bi-scale-6x) + var(--bi-scale-0-50x));
346
346
  --bic-button-size: var(--bi-scale-11x);
347
347
  --bic-button-font-size: 1rem;
@@ -409,13 +409,13 @@
409
409
  --bic-button-font-size: .875rem;
410
410
  --bic-button-line-height: 1.25rem;
411
411
  --bic-button-padding: var(--bi-scale-1-5x) calc(var(--bi-scale-3x) + var(--bi-scale-0-50x));
412
- --bic-button-icon-size: var(--bi-scale-4x);
412
+ --bic-button-icon-size: var(--bi-icon-small);
413
413
  --bic-button-size: var(--bi-scale-8x);
414
414
  }
415
415
 
416
416
  .bi-button[data-size="large"] {
417
417
  --bic-button-padding: var(--bi-scale-2x) calc(var(--bi-scale-9x) + var(--bi-scale-0-50x));
418
- --bic-button-icon-size: var(--bi-scale-8x);
418
+ --bic-button-icon-size: var(--bi-icon-large);
419
419
  --bic-button-size: var(--bi-scale-14x);
420
420
  }
421
421
 
@@ -3109,6 +3109,7 @@ svg[data-color="white"] {
3109
3109
  }
3110
3110
 
3111
3111
  .bi-popover {
3112
+ --bic-popover-arrow-size: var(--bi-scale-3x);
3112
3113
  --bic-popover-background: var(--bi-basic-white);
3113
3114
  --bic-popover-border-width: var(--bi-stroke-thin);
3114
3115
  --bic-popover-border-style: solid;
@@ -3152,6 +3153,37 @@ svg[data-color="white"] {
3152
3153
  display: block;
3153
3154
  }
3154
3155
 
3156
+ .bi-popover[data-arrow="true"]:before {
3157
+ background: var(--bic-popover-background);
3158
+ border: inherit;
3159
+ box-sizing: border-box;
3160
+ content: "";
3161
+ height: var(--bic-popover-arrow-size);
3162
+ left: var(--bic-popover-arrow-x);
3163
+ top: var(--bic-popover-arrow-y);
3164
+ width: var(--bic-popover-arrow-size);
3165
+ border-top-color: #0000;
3166
+ border-left-color: #0000;
3167
+ position: absolute;
3168
+ translate: -50% -50%;
3169
+ }
3170
+
3171
+ .bi-popover[data-arrow="true"][data-placement="top"]:before {
3172
+ rotate: 45deg;
3173
+ }
3174
+
3175
+ .bi-popover[data-arrow="true"][data-placement="left"]:before {
3176
+ rotate: -45deg;
3177
+ }
3178
+
3179
+ .bi-popover[data-arrow="true"][data-placement="right"]:before {
3180
+ rotate: 135deg;
3181
+ }
3182
+
3183
+ .bi-popover[data-arrow="true"][data-placement="bottom"]:before {
3184
+ rotate: -135deg;
3185
+ }
3186
+
3155
3187
  [data-popover="inline"] {
3156
3188
  all: unset;
3157
3189
  cursor: pointer;
package/dist/index.css CHANGED
@@ -197,7 +197,7 @@
197
197
  --bi-font-display-large: var(--bi-font-weight-regular) 4rem / 4.5rem var(--bi-font-family-brand);
198
198
  --bi-font-display-medium: var(--bi-font-weight-regular) 3rem / 3.5rem var(--bi-font-family-brand);
199
199
  --bi-font-headline-large: var(--bi-font-weight-regular) 2.5rem / 2.875rem var(--bi-font-family-brand);
200
- --bi-font-headline-medium: var(--bi-font-weight-regular) 2.25rem / 2.5rem var(--bi-font-family-plain);
200
+ --bi-font-headline-medium: var(--bi-font-weight-regular) 2.25rem / 2.5rem var(--bi-font-family-brand);
201
201
  --bi-font-headline-small: var(--bi-font-weight-regular) 1.75rem / 2rem var(--bi-font-family-brand);
202
202
  --bi-font-title-bold-xxl: var(--bi-font-weight-bold) 2rem / 2.25rem var(--bi-font-family-plain);
203
203
  --bi-font-title-bold-xl: var(--bi-font-weight-bold) 1.75rem / 2rem var(--bi-font-family-plain);
@@ -213,16 +213,16 @@
213
213
  --bi-font-title-regular-small: var(--bi-font-weight-regular) 1.125rem / 1.25rem var(--bi-font-family-plain);
214
214
  --bi-font-title-regular-xs: var(--bi-font-weight-regular) 1rem / 1.125rem var(--bi-font-family-plain);
215
215
  --bi-font-title-regular-xxs: var(--bi-font-weight-regular) .875rem / 1rem var(--bi-font-family-plain);
216
- --bi-font-body-xl: var(--bi-font-weight-regular) 1.125rem / 1.6875rem var(--bi-font-family-plain);
217
- --bi-font-body-large: var(--bi-font-weight-regular) 1rem / 1.5rem var(--bi-font-family-plain);
218
- --bi-font-body-medium: var(--bi-font-weight-regular) .875rem / 1.3125rem var(--bi-font-family-plain);
219
- --bi-font-body-small: var(--bi-font-weight-regular) .8125rem / 1.25rem var(--bi-font-family-plain);
220
- --bi-font-body-xs: var(--bi-font-weight-regular) .75rem / 1.125rem var(--bi-font-family-plain);
221
216
  --bi-font-label-xl: var(--bi-font-weight-bold) 1.125rem / 1.6875rem var(--bi-font-family-plain);
222
217
  --bi-font-label-large: var(--bi-font-weight-bold) 1rem / 1.5rem var(--bi-font-family-plain);
223
218
  --bi-font-label-medium: var(--bi-font-weight-bold) .875rem / 1.25rem var(--bi-font-family-plain);
224
219
  --bi-font-label-small: var(--bi-font-weight-bold) .8125rem / 1.25rem var(--bi-font-family-plain);
225
220
  --bi-font-label-xs: var(--bi-font-weight-bold) .75rem / 1.125rem var(--bi-font-family-plain);
221
+ --bi-font-body-xl: var(--bi-font-weight-regular) 1.125rem / 1.6875rem var(--bi-font-family-plain);
222
+ --bi-font-body-large: var(--bi-font-weight-regular) 1rem / 1.5rem var(--bi-font-family-plain);
223
+ --bi-font-body-medium: var(--bi-font-weight-regular) .875rem / 1.3125rem var(--bi-font-family-plain);
224
+ --bi-font-body-small: var(--bi-font-weight-regular) .8125rem / 1.25rem var(--bi-font-family-plain);
225
+ --bi-font-body-xs: var(--bi-font-weight-regular) .75rem / 1.125rem var(--bi-font-family-plain);
226
226
  }
227
227
 
228
228
  *, :before, :after {
package/dist/salesforce.css CHANGED
@@ -196,7 +196,7 @@
196
196
  --bi-font-display-large: var(--bi-font-weight-regular) 4rem / 4.5rem var(--bi-font-family-brand);
197
197
  --bi-font-display-medium: var(--bi-font-weight-regular) 3rem / 3.5rem var(--bi-font-family-brand);
198
198
  --bi-font-headline-large: var(--bi-font-weight-regular) 2.5rem / 2.875rem var(--bi-font-family-brand);
199
- --bi-font-headline-medium: var(--bi-font-weight-regular) 2.25rem / 2.5rem var(--bi-font-family-plain);
199
+ --bi-font-headline-medium: var(--bi-font-weight-regular) 2.25rem / 2.5rem var(--bi-font-family-brand);
200
200
  --bi-font-headline-small: var(--bi-font-weight-regular) 1.75rem / 2rem var(--bi-font-family-brand);
201
201
  --bi-font-title-bold-xxl: var(--bi-font-weight-bold) 2rem / 2.25rem var(--bi-font-family-plain);
202
202
  --bi-font-title-bold-xl: var(--bi-font-weight-bold) 1.75rem / 2rem var(--bi-font-family-plain);
@@ -212,16 +212,16 @@
212
212
  --bi-font-title-regular-small: var(--bi-font-weight-regular) 1.125rem / 1.25rem var(--bi-font-family-plain);
213
213
  --bi-font-title-regular-xs: var(--bi-font-weight-regular) 1rem / 1.125rem var(--bi-font-family-plain);
214
214
  --bi-font-title-regular-xxs: var(--bi-font-weight-regular) .875rem / 1rem var(--bi-font-family-plain);
215
- --bi-font-body-xl: var(--bi-font-weight-regular) 1.125rem / 1.6875rem var(--bi-font-family-plain);
216
- --bi-font-body-large: var(--bi-font-weight-regular) 1rem / 1.5rem var(--bi-font-family-plain);
217
- --bi-font-body-medium: var(--bi-font-weight-regular) .875rem / 1.3125rem var(--bi-font-family-plain);
218
- --bi-font-body-small: var(--bi-font-weight-regular) .8125rem / 1.25rem var(--bi-font-family-plain);
219
- --bi-font-body-xs: var(--bi-font-weight-regular) .75rem / 1.125rem var(--bi-font-family-plain);
220
215
  --bi-font-label-xl: var(--bi-font-weight-bold) 1.125rem / 1.6875rem var(--bi-font-family-plain);
221
216
  --bi-font-label-large: var(--bi-font-weight-bold) 1rem / 1.5rem var(--bi-font-family-plain);
222
217
  --bi-font-label-medium: var(--bi-font-weight-bold) .875rem / 1.25rem var(--bi-font-family-plain);
223
218
  --bi-font-label-small: var(--bi-font-weight-bold) .8125rem / 1.25rem var(--bi-font-family-plain);
224
219
  --bi-font-label-xs: var(--bi-font-weight-bold) .75rem / 1.125rem var(--bi-font-family-plain);
220
+ --bi-font-body-xl: var(--bi-font-weight-regular) 1.125rem / 1.6875rem var(--bi-font-family-plain);
221
+ --bi-font-body-large: var(--bi-font-weight-regular) 1rem / 1.5rem var(--bi-font-family-plain);
222
+ --bi-font-body-medium: var(--bi-font-weight-regular) .875rem / 1.3125rem var(--bi-font-family-plain);
223
+ --bi-font-body-small: var(--bi-font-weight-regular) .8125rem / 1.25rem var(--bi-font-family-plain);
224
+ --bi-font-body-xs: var(--bi-font-weight-regular) .75rem / 1.125rem var(--bi-font-family-plain);
225
225
  }
226
226
 
227
227
  .bi-alert {
@@ -567,7 +567,7 @@
567
567
 
568
568
  .bi-button {
569
569
  --bic-button-box-shadow: none;
570
- --bic-button-icon-size: var(--bi-scale-6x);
570
+ --bic-button-icon-size: var(--bi-icon-medium);
571
571
  --bic-button-padding: .625rem calc(var(--bi-scale-6x) + var(--bi-scale-0-50x));
572
572
  --bic-button-size: var(--bi-scale-11x);
573
573
  --bic-button-font-size: 1rem;
@@ -635,13 +635,13 @@
635
635
  --bic-button-font-size: .875rem;
636
636
  --bic-button-line-height: 1.25rem;
637
637
  --bic-button-padding: var(--bi-scale-1-5x) calc(var(--bi-scale-3x) + var(--bi-scale-0-50x));
638
- --bic-button-icon-size: var(--bi-scale-4x);
638
+ --bic-button-icon-size: var(--bi-icon-small);
639
639
  --bic-button-size: var(--bi-scale-8x);
640
640
  }
641
641
 
642
642
  .bi-button[data-size="large"] {
643
643
  --bic-button-padding: var(--bi-scale-2x) calc(var(--bi-scale-9x) + var(--bi-scale-0-50x));
644
- --bic-button-icon-size: var(--bi-scale-8x);
644
+ --bic-button-icon-size: var(--bi-icon-large);
645
645
  --bic-button-size: var(--bi-scale-14x);
646
646
  }
647
647
 
@@ -3335,6 +3335,7 @@ svg[data-color="white"] {
3335
3335
  }
3336
3336
 
3337
3337
  .bi-popover {
3338
+ --bic-popover-arrow-size: var(--bi-scale-3x);
3338
3339
  --bic-popover-background: var(--bi-basic-white);
3339
3340
  --bic-popover-border-width: var(--bi-stroke-thin);
3340
3341
  --bic-popover-border-style: solid;
@@ -3378,6 +3379,37 @@ svg[data-color="white"] {
3378
3379
  display: block;
3379
3380
  }
3380
3381
 
3382
+ .bi-popover[data-arrow="true"]:before {
3383
+ background: var(--bic-popover-background);
3384
+ border: inherit;
3385
+ box-sizing: border-box;
3386
+ content: "";
3387
+ height: var(--bic-popover-arrow-size);
3388
+ left: var(--bic-popover-arrow-x);
3389
+ top: var(--bic-popover-arrow-y);
3390
+ width: var(--bic-popover-arrow-size);
3391
+ border-top-color: #0000;
3392
+ border-left-color: #0000;
3393
+ position: absolute;
3394
+ translate: -50% -50%;
3395
+ }
3396
+
3397
+ .bi-popover[data-arrow="true"][data-placement="top"]:before {
3398
+ rotate: 45deg;
3399
+ }
3400
+
3401
+ .bi-popover[data-arrow="true"][data-placement="left"]:before {
3402
+ rotate: -45deg;
3403
+ }
3404
+
3405
+ .bi-popover[data-arrow="true"][data-placement="right"]:before {
3406
+ rotate: 135deg;
3407
+ }
3408
+
3409
+ .bi-popover[data-arrow="true"][data-placement="bottom"]:before {
3410
+ rotate: -135deg;
3411
+ }
3412
+
3381
3413
  [data-popover="inline"] {
3382
3414
  all: unset;
3383
3415
  cursor: pointer;
package/dist/tokens.css CHANGED
@@ -196,7 +196,7 @@
196
196
  --bi-font-display-large: var(--bi-font-weight-regular) 4rem / 4.5rem var(--bi-font-family-brand);
197
197
  --bi-font-display-medium: var(--bi-font-weight-regular) 3rem / 3.5rem var(--bi-font-family-brand);
198
198
  --bi-font-headline-large: var(--bi-font-weight-regular) 2.5rem / 2.875rem var(--bi-font-family-brand);
199
- --bi-font-headline-medium: var(--bi-font-weight-regular) 2.25rem / 2.5rem var(--bi-font-family-plain);
199
+ --bi-font-headline-medium: var(--bi-font-weight-regular) 2.25rem / 2.5rem var(--bi-font-family-brand);
200
200
  --bi-font-headline-small: var(--bi-font-weight-regular) 1.75rem / 2rem var(--bi-font-family-brand);
201
201
  --bi-font-title-bold-xxl: var(--bi-font-weight-bold) 2rem / 2.25rem var(--bi-font-family-plain);
202
202
  --bi-font-title-bold-xl: var(--bi-font-weight-bold) 1.75rem / 2rem var(--bi-font-family-plain);
@@ -212,14 +212,14 @@
212
212
  --bi-font-title-regular-small: var(--bi-font-weight-regular) 1.125rem / 1.25rem var(--bi-font-family-plain);
213
213
  --bi-font-title-regular-xs: var(--bi-font-weight-regular) 1rem / 1.125rem var(--bi-font-family-plain);
214
214
  --bi-font-title-regular-xxs: var(--bi-font-weight-regular) .875rem / 1rem var(--bi-font-family-plain);
215
- --bi-font-body-xl: var(--bi-font-weight-regular) 1.125rem / 1.6875rem var(--bi-font-family-plain);
216
- --bi-font-body-large: var(--bi-font-weight-regular) 1rem / 1.5rem var(--bi-font-family-plain);
217
- --bi-font-body-medium: var(--bi-font-weight-regular) .875rem / 1.3125rem var(--bi-font-family-plain);
218
- --bi-font-body-small: var(--bi-font-weight-regular) .8125rem / 1.25rem var(--bi-font-family-plain);
219
- --bi-font-body-xs: var(--bi-font-weight-regular) .75rem / 1.125rem var(--bi-font-family-plain);
220
215
  --bi-font-label-xl: var(--bi-font-weight-bold) 1.125rem / 1.6875rem var(--bi-font-family-plain);
221
216
  --bi-font-label-large: var(--bi-font-weight-bold) 1rem / 1.5rem var(--bi-font-family-plain);
222
217
  --bi-font-label-medium: var(--bi-font-weight-bold) .875rem / 1.25rem var(--bi-font-family-plain);
223
218
  --bi-font-label-small: var(--bi-font-weight-bold) .8125rem / 1.25rem var(--bi-font-family-plain);
224
219
  --bi-font-label-xs: var(--bi-font-weight-bold) .75rem / 1.125rem var(--bi-font-family-plain);
220
+ --bi-font-body-xl: var(--bi-font-weight-regular) 1.125rem / 1.6875rem var(--bi-font-family-plain);
221
+ --bi-font-body-large: var(--bi-font-weight-regular) 1rem / 1.5rem var(--bi-font-family-plain);
222
+ --bi-font-body-medium: var(--bi-font-weight-regular) .875rem / 1.3125rem var(--bi-font-family-plain);
223
+ --bi-font-body-small: var(--bi-font-weight-regular) .8125rem / 1.25rem var(--bi-font-family-plain);
224
+ --bi-font-body-xs: var(--bi-font-weight-regular) .75rem / 1.125rem var(--bi-font-family-plain);
225
225
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bi-digital/css",
3
3
  "type": "module",
4
- "version": "0.6.4",
4
+ "version": "0.6.6",
5
5
  "engines": {
6
6
  "node": "^20.19.0 || >=22.12.0"
7
7
  },
@@ -35,7 +35,7 @@
35
35
  "lightningcss": "^1.30.2",
36
36
  "modern-normalize": "^3.0.1",
37
37
  "rimraf": "^6.1.0",
38
- "@bi-digital/tokens": "0.6.4"
38
+ "@bi-digital/tokens": "0.6.6"
39
39
  },
40
40
  "scripts": {
41
41
  "build": "rimraf dist && node config.js",