@canonical/styles-primitives-canonical 0.17.1 → 0.20.0
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/package.json +7 -7
- package/src/tokens.css +2 -141
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@canonical/styles-primitives-canonical",
|
|
3
3
|
"description": "Canonical's base styles",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.20.0",
|
|
5
5
|
"main": "src/index.css",
|
|
6
6
|
"files": [
|
|
7
7
|
"src"
|
|
@@ -12,13 +12,13 @@
|
|
|
12
12
|
},
|
|
13
13
|
"repository": {
|
|
14
14
|
"type": "git",
|
|
15
|
-
"url": "https://github.com/canonical/
|
|
15
|
+
"url": "https://github.com/canonical/pragma"
|
|
16
16
|
},
|
|
17
17
|
"license": "LGPL-3.0",
|
|
18
18
|
"bugs": {
|
|
19
|
-
"url": "https://github.com/canonical/
|
|
19
|
+
"url": "https://github.com/canonical/pragma/issues"
|
|
20
20
|
},
|
|
21
|
-
"homepage": "https://github.com/canonical/
|
|
21
|
+
"homepage": "https://github.com/canonical/pragma#readme",
|
|
22
22
|
"scripts": {
|
|
23
23
|
"check": "bun run check:biome",
|
|
24
24
|
"check:fix": "bun run check:biome:fix",
|
|
@@ -31,9 +31,9 @@
|
|
|
31
31
|
"normalize.css": "^8.0.1"
|
|
32
32
|
},
|
|
33
33
|
"devDependencies": {
|
|
34
|
-
"@biomejs/biome": "2.4.
|
|
35
|
-
"@canonical/biome-config": "^0.
|
|
34
|
+
"@biomejs/biome": "2.4.6",
|
|
35
|
+
"@canonical/biome-config": "^0.20.0",
|
|
36
36
|
"@canonical/tokens": "^0.9.0"
|
|
37
37
|
},
|
|
38
|
-
"gitHead": "
|
|
38
|
+
"gitHead": "1aee634b278922f2aa1cfe2a11d3b14e64280905"
|
|
39
39
|
}
|
package/src/tokens.css
CHANGED
|
@@ -409,144 +409,5 @@
|
|
|
409
409
|
--line-height-default: 1.5rem;
|
|
410
410
|
}
|
|
411
411
|
|
|
412
|
-
/*
|
|
413
|
-
|
|
414
|
-
--button-color-background: var(--tmp-color-background-default);
|
|
415
|
-
--button-color-background-hover: var(--tmp-color-background-hover);
|
|
416
|
-
--button-color-background-active: var(--tmp-color-background-active);
|
|
417
|
-
--button-color-text: var(--tmp-color-text-default);
|
|
418
|
-
--button-color-border: var(--color-border-high-contrast);
|
|
419
|
-
--button-color-border-hover: var(--button-color-border);
|
|
420
|
-
--button-color-border-active: var(--button-color-border);
|
|
421
|
-
|
|
422
|
-
--button-margin-left: var(--spacing-horizontal-large);
|
|
423
|
-
--button-margin-bottom: var(--spacing-input-margin-bottom);
|
|
424
|
-
--button-padding-vertical: var(--spacing-input-padding-vertical);
|
|
425
|
-
--button-padding-horizontal: var(--spacing-horizontal-large);
|
|
426
|
-
--button-border-width: var(--spacing-border-width);
|
|
427
|
-
--button-font-size: var(--font-size-default);
|
|
428
|
-
--button-font-weight: var(--font-weight-default);
|
|
429
|
-
--button-line-height: var(--line-height-default);
|
|
430
|
-
|
|
431
|
-
--card-border-style: solid;
|
|
432
|
-
--card-color-text: var(--tmp-color-text-default);
|
|
433
|
-
--card-color-background: var(--tmp-color-background-default);
|
|
434
|
-
--card-border-width: var(--spacing-border-width);
|
|
435
|
-
|
|
436
|
-
--card-section-padding-vertical: var(--spacing-vertical-large);
|
|
437
|
-
--card-section-padding-horizontal: var(--spacing-horizontal-large);
|
|
438
|
-
--card-section-separator-color: var(--tmp-color-border-default);
|
|
439
|
-
--card-section-separator-border-width: 1px;
|
|
440
|
-
--card-section-separator-border-style: solid;
|
|
441
|
-
|
|
442
|
-
--card-thumbnail-max-height: var(--tmp-dimension-heading-icon--small);
|
|
443
|
-
|
|
444
|
-
--chip-color-background: var(--tmp-color-background-neutral-default);
|
|
445
|
-
--chip-color-background-hover: var(--tmp-color-background-neutral-hover);
|
|
446
|
-
--chip-color-background-active: var(--tmp-color-background-neutral-active);
|
|
447
|
-
--chip-color-border: var(--color-border-high-contrast);
|
|
448
|
-
--chip-color-text: var(--tmp-color-text-default);
|
|
449
|
-
|
|
450
|
-
--chip-border-radius: 1rem;
|
|
451
|
-
--chip-font-size: var(--font-size-small);
|
|
452
|
-
--chip-font-weight: var(--font-weight-default);
|
|
453
|
-
--chip-line-height: var(--line-height-small);
|
|
454
|
-
--chip-border-width: var(--spacing-border-width);
|
|
455
|
-
--chip-padding-vertical: var(--spacing-vertical-xsmall);
|
|
456
|
-
--chip-padding-horizontal: var(--spacing-horizontal-small);
|
|
457
|
-
--chip-margin-bottom: var(--spacing-vertical-small);
|
|
458
|
-
--chip-margin-left: var(--spacing-horizontal-medium);
|
|
459
|
-
|
|
460
|
-
--link-soft-selected-font-weight: var(--font-weight-bold);
|
|
461
|
-
--link-activation-contents-padding-vertical: var(--spacing-vertical-small);
|
|
462
|
-
--link-activation-contents-padding-horizontal: var(
|
|
463
|
-
--spacing-horizontal-small
|
|
464
|
-
);
|
|
465
|
-
--link-focus-outline-style: var(--tmp-focusable-focused-outline-style);
|
|
466
|
-
--link-focus-outline-width: var(--tmp-focusable-focused-outline-width);
|
|
467
|
-
--link-focus-outline-color: var(--tmp-focusable-focused-outline-color);
|
|
468
|
-
|
|
469
|
-
/*
|
|
470
|
-
TODO the tooltip's color tokens should be inverted from the active color theme.
|
|
471
|
-
This is to provide greater color contrast against its context.
|
|
472
|
-
This will be implemented once theming DS-wide is added.
|
|
473
|
-
*/
|
|
474
|
-
|
|
475
|
-
--icon-size: 1em;
|
|
476
|
-
|
|
477
|
-
--tooltip-color-background: var(--tmp-color-background-default);
|
|
478
|
-
--tooltip-color-background-hover: var(--tmp-color-background-hover);
|
|
479
|
-
--tooltip-color-background-active: var(--tmp-color-background-active);
|
|
480
|
-
--tooltip-color-text: var(--tmp-color-text-default);
|
|
481
|
-
--tooltip-color-border: var(--color-border-high-contrast);
|
|
482
|
-
--tooltip-color-border-hover: var(--tooltip-color-border);
|
|
483
|
-
--tooltip-color-border-active: var(--tooltip-color-border);
|
|
484
|
-
|
|
485
|
-
--tooltip-border-radius: 0;
|
|
486
|
-
--tooltip-margin-left: 0;
|
|
487
|
-
--tooltip-margin-bottom: 0;
|
|
488
|
-
--tooltip-padding-vertical: var(--spacing-input-padding-vertical);
|
|
489
|
-
--tooltip-padding-horizontal: var(--spacing-horizontal-large);
|
|
490
|
-
--tooltip-border-width: var(--spacing-border-width);
|
|
491
|
-
--tooltip-font-size: var(--font-size-default);
|
|
492
|
-
--tooltip-font-weight: var(--font-weight-default);
|
|
493
|
-
--tooltip-line-height: var(--line-height-default);
|
|
494
|
-
|
|
495
|
-
--tooltip-spacing-arrow-size: 6px;
|
|
496
|
-
|
|
497
|
-
--badge-color-background: var(--tmp-color-text-default);
|
|
498
|
-
--badge-color-text: var(--tmp-color-background-default);
|
|
499
|
-
|
|
500
|
-
--badge-border-radius: 1rem;
|
|
501
|
-
--badge-font-size: var(--font-size-xsmall);
|
|
502
|
-
--badge-font-weight: var(--font-weight-bold);
|
|
503
|
-
--badge-line-height: var(--line-height-xsmall);
|
|
504
|
-
--badge-padding-vertical: 0;
|
|
505
|
-
--badge-padding-horizontal: var(--spacing-horizontal-xsmall);
|
|
506
|
-
--badge-margin-bottom: 0;
|
|
507
|
-
|
|
508
|
-
--badge-max-width: 4ch;
|
|
509
|
-
--badge-min-width: calc(
|
|
510
|
-
var(--badge-line-height) -
|
|
511
|
-
(2 * var(--badge-padding-horizontal))
|
|
512
|
-
);
|
|
513
|
-
|
|
514
|
-
--rule-color-background: var(--tmp-color-border-default);
|
|
515
|
-
--rule-border-width: 0;
|
|
516
|
-
--rule-height: 1px;
|
|
517
|
-
--rule-margin-top: 0;
|
|
518
|
-
--rule-height-with-margin: var(--spacing-vertical-small);
|
|
519
|
-
|
|
520
|
-
--section-padding-bottom-spacing-shallow: var(--spacing-vertical-xlarge);
|
|
521
|
-
--section-padding-bottom-spacing-default: var(--spacing-vertical-xxlarge);
|
|
522
|
-
--section-padding-bottom-spacing-deep: var(--spacing-vertical-xxxlarge);
|
|
523
|
-
--section-padding-bottom-spacing-hero: var(
|
|
524
|
-
--section-padding-bottom-spacing-default
|
|
525
|
-
);
|
|
526
|
-
--section-padding-top-spacing-default: 0px;
|
|
527
|
-
--section-padding-top-bordered-default: 0px;
|
|
528
|
-
--section-padding-top-bordered-true: calc(
|
|
529
|
-
var(--section-border-start-width-with-padding) -
|
|
530
|
-
var(--section-border-start-width)
|
|
531
|
-
);
|
|
532
|
-
--section-padding-top-spacing-shallow: 0px;
|
|
533
|
-
--section-padding-top-spacing-deep: 0px;
|
|
534
|
-
--section-padding-top-spacing-hero: var(--spacing-vertical-xlarge);
|
|
535
|
-
--section-border-start-color: var(--tmp-color-border-default);
|
|
536
|
-
--section-border-start-style: solid;
|
|
537
|
-
--section-border-start-width: var(--rule-height);
|
|
538
|
-
--section-border-start-width-with-padding: var(--spacing-vertical-small);
|
|
539
|
-
--skip-link-background: var(--tmp-color-background-alt);
|
|
540
|
-
--skip-link-color: var(--tmp-color-text-link-default);
|
|
541
|
-
--skip-link-inset-inline-start: -999px;
|
|
542
|
-
--skip-link-top: -999px;
|
|
543
|
-
--skip-link-outline-offset: calc(
|
|
544
|
-
-1 *
|
|
545
|
-
var(--tmp-focusable-focused-outline-width)
|
|
546
|
-
);
|
|
547
|
-
--skip-link-focus-inset-inline-start: var(--spacing-horizontal-small);
|
|
548
|
-
--skip-link-focus-padding-block: var(--spacing-vertical-large);
|
|
549
|
-
--skip-link-focus-padding-inline: var(--spacing-horizontal-large);
|
|
550
|
-
--skip-link-focus-top: var(--spacing-vertical-small);
|
|
551
|
-
--skip-link-focus-z-index: 999999;
|
|
552
|
-
}
|
|
412
|
+
/* Component semantic tokens have been migrated to each component's styles.css
|
|
413
|
+
in packages/react/ds-global/src/lib/<Component>/styles.css */
|