@dictu/design-tokens 1.5.0 → 2.0.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.
Files changed (37) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/index.css +511 -85
  3. package/package.json +6 -3
  4. package/src/$metadata.json +3 -0
  5. package/src/$themes.json +2 -1
  6. package/src/common/common.tokens.json +33 -27
  7. package/src/components/breadcrumb.tokens.json +46 -4
  8. package/src/components/card.tokens.json +4 -4
  9. package/src/components/hero.tokens.json +1 -1
  10. package/src/components/list.tokens.json +32 -0
  11. package/src/components/navigation-bar.tokens.json +11 -11
  12. package/src/components/page-footer.tokens.json +2 -2
  13. package/src/components/paragraph.tokens.json +2 -2
  14. package/src/components/searchbar.tokens.wip.json +66 -0
  15. package/src/components/table.tokens.json +162 -0
  16. package/src/components/timeline.tokens.json +1 -1
  17. package/style-dictionary-build.mjs +4 -24
  18. package/dist/accordion.css +0 -45
  19. package/dist/breadcrumb.css +0 -26
  20. package/dist/button.css +0 -84
  21. package/dist/card.css +0 -49
  22. package/dist/container.css +0 -8
  23. package/dist/figure.css +0 -10
  24. package/dist/grid.css +0 -16
  25. package/dist/heading.css +0 -36
  26. package/dist/hero.css +0 -24
  27. package/dist/icon.css +0 -8
  28. package/dist/link-list.css +0 -13
  29. package/dist/link.css +0 -24
  30. package/dist/logo.css +0 -20
  31. package/dist/navigation-bar.css +0 -39
  32. package/dist/page-footer.css +0 -14
  33. package/dist/page-header.css +0 -8
  34. package/dist/paragraph.css +0 -14
  35. package/dist/section.css +0 -7
  36. package/dist/skip-link.css +0 -16
  37. package/dist/timeline.css +0 -34
package/style-dictionary-build.mjs CHANGED
@@ -1,18 +1,15 @@
1
1
  import { register } from '@tokens-studio/sd-transforms';
2
2
  import { globSync } from 'glob';
3
- import path from 'path';
4
3
  import StyleDictionary from 'style-dictionary';
5
4
 
6
5
  // will register them on StyleDictionary object
7
6
  // that is installed as a dependency of this package.
8
7
  register(StyleDictionary);
9
8
 
10
- // Path to base token files.
11
- const baseTokens = ['./src/**/common.tokens.json', './src/**/core.tokens.json'];
9
+ // Path to token files.
12
10
  const tokens = globSync('./src/**/*.tokens.json');
13
11
 
14
- // Unified SD config that handles both base tokens and component tokens in a single build.
15
- const unified = new StyleDictionary({
12
+ const sd = new StyleDictionary({
16
13
  source: tokens,
17
14
  preprocessors: ['tokens-studio'],
18
15
  platforms: {
@@ -21,34 +18,17 @@ const unified = new StyleDictionary({
21
18
  transforms: ['attribute/cti', 'name/kebab', 'color/rgb'],
22
19
  buildPath: 'dist/',
23
20
  files: [
24
- // Base tokens file (core and common tokens)
25
21
  {
26
22
  destination: 'index.css',
27
23
  format: 'css/variables',
28
- filter: token =>
29
- baseTokens.some(pattern =>
30
- token.filePath.match(pattern.replace('./src/**/', '').replace('.tokens.json', ''))
31
- ),
32
24
  options: {
33
25
  selector: '.dictu-theme',
34
- outputReferences: false,
26
+ outputReferences: true,
35
27
  },
36
28
  },
37
- // Component-specific token files
38
- ...tokens
39
- .filter(file => file.startsWith('src/components/'))
40
- .map(file => ({
41
- destination: `${path.parse(file).name.toLowerCase().replace('.tokens', '')}.css`,
42
- format: 'css/variables',
43
- filter: token => token.filePath === file,
44
- options: {
45
- selector: `.dictu-${path.parse(file).name.toLowerCase().replace('.tokens', '')}`,
46
- outputReferences: true,
47
- },
48
- })),
49
29
  ],
50
30
  },
51
31
  },
52
32
  });
53
33
 
54
- await unified.buildAllPlatforms();
34
+ await sd.buildAllPlatforms();
package/dist/accordion.css DELETED
@@ -1,45 +0,0 @@
1
- /**
2
- * Do not edit directly, this file was auto-generated.
3
- */
4
-
5
- .dictu-accordion {
6
- --govnl-accordion-body-border-color: rgba(0, 0, 0, 0);
7
- --govnl-accordion-button-border-color: rgba(0, 0, 0, 0);
8
- --govnl-accordion-button-icon-size: 1.5em;
9
- --govnl-accordion-button-hover-border-color: rgba(0, 0, 0, 0);
10
- --govnl-accordion-button-focus-border-color: rgba(0, 0, 0, 0);
11
- --govnl-accordion-button-active-border-color: rgba(0, 0, 0, 0);
12
- --govnl-accordion-button-expanded-border-color: rgba(0, 0, 0, 0);
13
- --govnl-accordion-button-section-border-width: 0px;
14
- --govnl-accordion-body-border-width: var(--govnl-border-border-width-sm);
15
- --govnl-accordion-button-hover-background-color: var(--govnl-color-grijs-100);
16
- --govnl-accordion-button-active-background-color: var(--govnl-color-grijs-200);
17
- --govnl-accordion-button-section-border-block-end-width: var(--govnl-border-border-width-sm);
18
- --govnl-accordion-body-font-family: var(--govnl-document-font-family);
19
- --govnl-accordion-body-font-size: var(--govnl-document-font-size);
20
- --govnl-accordion-body-font-weight: var(--govnl-document-font-weight);
21
- --govnl-accordion-body-padding-block-end: var(--govnl-space-md);
22
- --govnl-accordion-body-padding-block-start: var(--govnl-space-sm);
23
- --govnl-accordion-body-padding-inline-end: var(--govnl-space-sm);
24
- --govnl-accordion-body-padding-inline-start: var(--govnl-space-sm);
25
- --govnl-accordion-button-background-color: var(--govnl-document-background-color);
26
- --govnl-accordion-button-font-family: var(--govnl-document-font-family);
27
- --govnl-accordion-button-font-size: var(--govnl-document-font-size);
28
- --govnl-accordion-button-font-weight: var(--govnl-document-strong-font-weight);
29
- --govnl-accordion-button-line-height: var(--govnl-document-line-height);
30
- --govnl-accordion-button-gap: var(--govnl-gap-content-min) / 2;
31
- --govnl-accordion-button-icon-margin-inline: var(--govnl-space-xs);
32
- --govnl-accordion-button-padding-block-end: var(--govnl-space-xs);
33
- --govnl-accordion-button-padding-block-start: var(--govnl-space-xs);
34
- --govnl-accordion-button-padding-inline-end: var(--govnl-space-sm);
35
- --govnl-accordion-button-padding-inline-start: var(--govnl-space-sm);
36
- --govnl-accordion-button-focus-background-color: var(--govnl-focus-background-color);
37
- --govnl-accordion-button-focus-color: var(--govnl-focus-color);
38
- --govnl-accordion-button-expanded-background-color: var(--govnl-document-background-color);
39
- --govnl-accordion-button-expanded-color: var(--govnl-document-color);
40
- --govnl-accordion-button-section-border-color: var(--govnl-line-subtle-border-color);
41
- --govnl-accordion-button-color: var(--govnl-interaction-color);
42
- --govnl-accordion-button-icon-color: var(--govnl-interaction-color);
43
- --govnl-accordion-button-hover-color: var(--govnl-interaction-hover-color);
44
- --govnl-accordion-button-active-color: var(--govnl-interaction-active-color);
45
- }
package/dist/breadcrumb.css DELETED
@@ -1,26 +0,0 @@
1
- /**
2
- * Do not edit directly, this file was auto-generated.
3
- */
4
-
5
- .dictu-breadcrumb {
6
- --govnl-breadcrumb-nav-link-active-text-decoration: None;
7
- --govnl-breadcrumb-nav-link-focus-visible-text-decoration: None;
8
- --govnl-breadcrumb-nav-link-hover-text-decoration: None;
9
- --govnl-breadcrumb-nav-link-text-decoration: underline;
10
- --govnl-breadcrumb-nav-separator-size: var(--govnl-dimension-size-300);
11
- --govnl-breadcrumb-nav-font-family: var(--govnl-document-font-family);
12
- --govnl-breadcrumb-nav-font-size: var(--govnl-document-font-size);
13
- --govnl-breadcrumb-nav-font-weight: var(--govnl-document-font-weight);
14
- --govnl-breadcrumb-nav-line-height: var(--govnl-document-line-height);
15
- --govnl-breadcrumb-nav-link-padding-block-end: var(--govnl-space-xs);
16
- --govnl-breadcrumb-nav-link-padding-block-start: var(--govnl-space-xs);
17
- --govnl-breadcrumb-nav-link-padding-inline-end: var(--govnl-space-xs);
18
- --govnl-breadcrumb-nav-link-padding-inline-start: 0px var(--govnl-space-xs);
19
- --govnl-breadcrumb-nav-link-focus-visible-background-color: var(--govnl-focus-background-color);
20
- --govnl-breadcrumb-nav-link-focus-visible-color: var(--govnl-focus-color);
21
- --govnl-breadcrumb-nav-link-current-color: var(--govnl-document-subtle-color);
22
- --govnl-breadcrumb-nav-separator-color: var(--govnl-document-subtle-color);
23
- --govnl-breadcrumb-nav-link-color: var(--govnl-interaction-color);
24
- --govnl-breadcrumb-nav-link-active-color: var(--govnl-interaction-active-color);
25
- --govnl-breadcrumb-nav-link-hover-color: var(--govnl-interaction-hover-color);
26
- }
package/dist/button.css DELETED
@@ -1,84 +0,0 @@
1
- /**
2
- * Do not edit directly, this file was auto-generated.
3
- */
4
-
5
- .dictu-button {
6
- --govnl-button-primary-action-border-color: rgba(0, 0, 0, 0);
7
- --govnl-button-primary-action-hover-border-color: rgba(0, 0, 0, 0);
8
- --govnl-button-primary-action-active-border-color: rgba(0, 0, 0, 0);
9
- --govnl-button-primary-action-disabled-border-color: rgba(0, 0, 0, 0);
10
- --govnl-button-primary-action-focus-border-color: rgba(0, 0, 0, 0);
11
- --govnl-button-secondary-action-disabled-border-color: rgba(0, 0, 0, 0);
12
- --govnl-button-secondary-action-focus-border-color: rgba(0, 0, 0, 0);
13
- --govnl-button-subtle-hover-border-color: rgba(0, 0, 0, 0);
14
- --govnl-button-subtle-background-color: rgba(0, 0, 0, 0);
15
- --govnl-button-subtle-border-color: rgba(0, 0, 0, 0);
16
- --govnl-button-subtle-disabled-border-color: rgba(0, 0, 0, 0);
17
- --govnl-button-subtle-focus-border-color: rgba(0, 0, 0, 0);
18
- --govnl-button-subtle-active-border-color: rgba(0, 0, 0, 0);
19
- --govnl-button-icon-only-background-color: rgba(0, 0, 0, 0);
20
- --govnl-button-icon-only-border-color: rgba(0, 0, 0, 0);
21
- --govnl-button-icon-only-hover-border-color: rgba(0, 0, 0, 0);
22
- --govnl-button-icon-only-active-border-color: rgba(0, 0, 0, 0);
23
- --govnl-button-icon-only-disabled-border-color: rgba(0, 0, 0, 0);
24
- --govnl-button-icon-only-focus-border-color: rgba(0, 0, 0, 0);
25
- --govnl-button-icon-size: 1.125em;
26
- --govnl-button-primary-action-color: var(--govnl-color-white);
27
- --govnl-button-primary-action-hover-color: var(--govnl-color-white);
28
- --govnl-button-primary-action-active-color: var(--govnl-color-white);
29
- --govnl-button-primary-action-disabled-background-color: var(--govnl-color-grijs-50);
30
- --govnl-button-primary-action-disabled-color: var(--govnl-color-grijs-500);
31
- --govnl-button-secondary-action-hover-background-color: var(--govnl-color-grijs-50);
32
- --govnl-button-secondary-action-background-color: var(--govnl-color-white);
33
- --govnl-button-secondary-action-disabled-background-color: var(--govnl-color-grijs-50);
34
- --govnl-button-secondary-action-disabled-color: var(--govnl-color-grijs-500);
35
- --govnl-button-secondary-action-active-background-color: var(--govnl-color-grijs-100);
36
- --govnl-button-subtle-hover-background-color: var(--govnl-color-grijs-50);
37
- --govnl-button-subtle-disabled-background-color: var(--govnl-color-grijs-50);
38
- --govnl-button-subtle-disabled-color: var(--govnl-color-grijs-500);
39
- --govnl-button-subtle-active-background-color: var(--govnl-color-grijs-50);
40
- --govnl-button-icon-only-hover-background-color: var(--govnl-color-grijs-50);
41
- --govnl-button-icon-only-active-background-color: var(--govnl-color-grijs-50);
42
- --govnl-button-icon-only-disabled-background-color: var(--govnl-color-grijs-50);
43
- --govnl-button-icon-only-disabled-color: var(--govnl-color-grijs-500);
44
- --govnl-button-border-radius: var(--govnl-border-border-radius-sm);
45
- --govnl-button-border-width: var(--govnl-border-border-width-sm);
46
- --govnl-button-min-block-size: var(--govnl-dimension-pointer-target-min-size);
47
- --govnl-button-min-inline-size: var(--govnl-dimension-pointer-target-min-size);
48
- --govnl-button-primary-action-focus-background-color: var(--govnl-focus-background-color);
49
- --govnl-button-primary-action-focus-color: var(--govnl-focus-color);
50
- --govnl-button-secondary-action-focus-background-color: var(--govnl-focus-background-color);
51
- --govnl-button-secondary-action-focus-color: var(--govnl-focus-color);
52
- --govnl-button-subtle-focus-background-color: var(--govnl-focus-background-color);
53
- --govnl-button-subtle-focus-color: var(--govnl-focus-color);
54
- --govnl-button-icon-only-focus-background-color: var(--govnl-focus-background-color);
55
- --govnl-button-icon-only-focus-color: var(--govnl-focus-color);
56
- --govnl-button-icon-only-padding-block-end: var(--govnl-space-xs);
57
- --govnl-button-icon-only-padding-block-start: var(--govnl-space-xs);
58
- --govnl-button-icon-only-padding-inline-start: var(--govnl-space-xs);
59
- --govnl-button-icon-only-padding-inline-end: var(--govnl-space-xs);
60
- --govnl-button-font-family: var(--govnl-document-font-family);
61
- --govnl-button-font-size: var(--govnl-document-font-size);
62
- --govnl-button-font-weight: var(--govnl-document-font-weight);
63
- --govnl-button-line-height: var(--govnl-document-line-height);
64
- --govnl-button-padding-block-end: var(--govnl-space-xs);
65
- --govnl-button-padding-block-start: var(--govnl-space-xs);
66
- --govnl-button-padding-inline-end: var(--govnl-space-sm);
67
- --govnl-button-padding-inline-start: var(--govnl-space-sm);
68
- --govnl-button-column-gap: var(--govnl-gap-content-min) / 2;
69
- --govnl-button-primary-action-background-color: var(--govnl-interaction-color);
70
- --govnl-button-primary-action-hover-background-color: var(--govnl-interaction-hover-color);
71
- --govnl-button-primary-action-active-background-color: var(--govnl-interaction-active-color);
72
- --govnl-button-secondary-action-hover-border-color: var(--govnl-interaction-hover-color);
73
- --govnl-button-secondary-action-hover-color: var(--govnl-interaction-hover-color);
74
- --govnl-button-secondary-action-border-color: var(--govnl-interaction-color);
75
- --govnl-button-secondary-action-color: var(--govnl-interaction-color);
76
- --govnl-button-secondary-action-active-border-color: var(--govnl-interaction-active-color);
77
- --govnl-button-secondary-action-active-color: var(--govnl-interaction-active-color);
78
- --govnl-button-subtle-hover-color: var(--govnl-interaction-hover-color);
79
- --govnl-button-subtle-color: var(--govnl-interaction-color);
80
- --govnl-button-subtle-active-color: var(--govnl-interaction-active-color);
81
- --govnl-button-icon-only-color: var(--govnl-interaction-color);
82
- --govnl-button-icon-only-hover-color: var(--govnl-interaction-hover-color);
83
- --govnl-button-icon-only-active-color: var(--govnl-interaction-active-color);
84
- }
package/dist/card.css DELETED
@@ -1,49 +0,0 @@
1
- /**
2
- * Do not edit directly, this file was auto-generated.
3
- */
4
-
5
- .dictu-card {
6
- --govnl-card-default-focus-border-color: transparant;
7
- --govnl-card-heading-text-decoration-line: underline;
8
- --govnl-card-heading-hover-text-decoration-line: underline;
9
- --govnl-card-heading-hover-text-decoration-thickness: max(3px, .1875rem, .12em);
10
- --govnl-card-heading-text-decoration-thickness: max(1px, .0625rem);
11
- --govnl-card-heading-text-underline-offset: 0.1578em;
12
- --govnl-card-heading-active-text-decoration-thickness: max(3px, .1875rem, .12em);
13
- --govnl-card-heading-active-text-decoration-line: underline;
14
- --govnl-card-heading-focus-visible-text-decoration-line: underline;
15
- --govnl-card-heading-focus-visible-text-decoration-thickness: max(3px, .1875rem, .12em);
16
- --govnl-card-accent-border-color: transparant;
17
- --govnl-card-accent-hover-border-color: transparant;
18
- --govnl-card-accent-active-border-color: transparant;
19
- --govnl-card-accent-focus-border-color: transparant;
20
- --govnl-card-default-hover-background-color: var(--govnl-color-grijs-100);
21
- --govnl-card-default-active-background-color: var(--govnl-color-grijs-200);
22
- --govnl-card-default-border-radius: var(--govnl-border-border-radius-sm);
23
- --govnl-card-default-border-width: var(--govnl-border-border-width-sm);
24
- --govnl-card-default-background-color: var(--govnl-document-background-color);
25
- --govnl-card-default-border-color: var(--govnl-line-subtle-border-color);
26
- --govnl-card-default-hover-border-color: var(--govnl-line-border-color);
27
- --govnl-card-default-active-border-color: var(--govnl-line-strong-border-color);
28
- --govnl-card-default-focus-background-color: var(--govnl-focus-background-color);
29
- --govnl-card-default-focus-color: var(--govnl-focus-color);
30
- --govnl-card-default-main-padding-block-start: var(--govnl-space-sm);
31
- --govnl-card-default-main-padding-inline-end: var(--govnl-space-sm);
32
- --govnl-card-default-main-padding-inline-start: var(--govnl-space-sm);
33
- --govnl-card-default-main-padding-block-end: var(--govnl-space-sm);
34
- --govnl-card-default-main-row-gap: var(--govnl-space-xs);
35
- --govnl-card-accent-background-color: var(--govnl-brand-primary-500);
36
- --govnl-card-accent-color: var(--govnl-document-inverse-color);
37
- --govnl-card-accent-hover-background-color: var(--govnl-brand-primary-500);
38
- --govnl-card-accent-hover-color: var(--govnl-document-inverse-color);
39
- --govnl-card-accent-active-background-color: var(--govnl-brand-primary-500);
40
- --govnl-card-accent-active-color: var(--govnl-document-inverse-color);
41
- --govnl-card-accent-focus-background-color: var(--govnl-focus-background-color);
42
- --govnl-card-accent-focus-color: var(--govnl-focus-color);
43
- --govnl-card-accent-heading-color: var(--govnl-document-inverse-color);
44
- --govnl-card-accent-heading-hover-color: var(--govnl-document-inverse-color);
45
- --govnl-card-accent-heading-active-color: var(--govnl-document-inverse-color);
46
- --govnl-card-accent-paragraph-color: var(--govnl-document-inverse-color);
47
- --govnl-card-accent-paragraph-hover-color: var(--govnl-document-inverse-color);
48
- --govnl-card-accent-paragraph-active-color: var(--govnl-document-inverse-color);
49
- }
package/dist/container.css DELETED
@@ -1,8 +0,0 @@
1
- /**
2
- * Do not edit directly, this file was auto-generated.
3
- */
4
-
5
- .dictu-container {
6
- --govnl-container-max-inline-size: calc(8 * var(--govnl-dimension-size-2000));
7
- --govnl-container-padding-inline: var(--govnl-dimension-size-200);
8
- }
package/dist/figure.css DELETED
@@ -1,10 +0,0 @@
1
- /**
2
- * Do not edit directly, this file was auto-generated.
3
- */
4
-
5
- .dictu-figure {
6
- --govnl-figure-caption-font-size: var(--govnl-typography-font-size-sm);
7
- --govnl-figure-caption-line-height: var(--govnl-typography-line-height-sm);
8
- --govnl-figure-caption-color: var(--govnl-document-color);
9
- --govnl-figure-row-gap: var(--govnl-gap-content-min) / 2;
10
- }
package/dist/grid.css DELETED
@@ -1,16 +0,0 @@
1
- /**
2
- * Do not edit directly, this file was auto-generated.
3
- */
4
-
5
- .dictu-grid {
6
- --govnl-grid-template-columns-col-1: repeat(1, 1fr);
7
- --govnl-grid-template-columns-col-2: repeat(2, 1fr);
8
- --govnl-grid-template-columns-col-3: repeat(3, 1fr);
9
- --govnl-grid-template-columns-col-4: repeat(4, 1fr);
10
- --govnl-grid-template-rows-auto: auto;
11
- --govnl-grid-template-columns-width: var(--govnl-dimension-size-2000);
12
- --govnl-grid-gap-row-min: var(--govnl-gap-content-min);
13
- --govnl-grid-gap-row-max: var(--govnl-gap-content-max);
14
- --govnl-grid-gap-column-min: var(--govnl-gap-content-min);
15
- --govnl-grid-gap-column-max: var(--govnl-gap-content-max);
16
- }
package/dist/heading.css DELETED
@@ -1,36 +0,0 @@
1
- /**
2
- * Do not edit directly, this file was auto-generated.
3
- */
4
-
5
- .dictu-heading {
6
- --nl-heading-level-1-font-size: var(--govnl-typography-font-size-3xl);
7
- --nl-heading-level-1-line-height: var(--govnl-typography-line-height-sm);
8
- --nl-heading-level-2-font-size: var(--govnl-typography-font-size-2xl);
9
- --nl-heading-level-2-line-height: var(--govnl-typography-line-height-sm);
10
- --nl-heading-level-3-font-size: var(--govnl-typography-font-size-xl);
11
- --nl-heading-level-3-line-height: var(--govnl-typography-line-height-sm);
12
- --nl-heading-level-4-font-size: var(--govnl-typography-font-size-lg);
13
- --nl-heading-level-4-line-height: var(--govnl-typography-line-height-md);
14
- --nl-heading-level-5-font-size: var(--govnl-typography-font-size-md);
15
- --nl-heading-level-5-line-height: var(--govnl-typography-line-height-md);
16
- --nl-heading-level-6-font-size: var(--govnl-typography-font-size-sm);
17
- --nl-heading-level-6-line-height: var(--govnl-typography-line-height-md);
18
- --nl-heading-level-1-color: var(--govnl-heading-color);
19
- --nl-heading-level-1-font-family: var(--govnl-heading-font-family);
20
- --nl-heading-level-1-font-weight: var(--govnl-heading-font-weight);
21
- --nl-heading-level-2-color: var(--govnl-heading-color);
22
- --nl-heading-level-2-font-family: var(--govnl-heading-font-family);
23
- --nl-heading-level-2-font-weight: var(--govnl-heading-font-weight);
24
- --nl-heading-level-3-color: var(--govnl-heading-color);
25
- --nl-heading-level-3-font-family: var(--govnl-heading-font-family);
26
- --nl-heading-level-3-font-weight: var(--govnl-heading-font-weight);
27
- --nl-heading-level-4-color: var(--govnl-heading-color);
28
- --nl-heading-level-4-font-family: var(--govnl-heading-font-family);
29
- --nl-heading-level-4-font-weight: var(--govnl-heading-font-weight);
30
- --nl-heading-level-5-color: var(--govnl-heading-color);
31
- --nl-heading-level-5-font-family: var(--govnl-heading-font-family);
32
- --nl-heading-level-5-font-weight: var(--govnl-heading-font-weight);
33
- --nl-heading-level-6-color: var(--govnl-heading-color);
34
- --nl-heading-level-6-font-family: var(--govnl-heading-font-family);
35
- --nl-heading-level-6-font-weight: var(--govnl-heading-font-weight);
36
- }
package/dist/hero.css DELETED
@@ -1,24 +0,0 @@
1
- /**
2
- * Do not edit directly, this file was auto-generated.
3
- */
4
-
5
- .dictu-hero {
6
- --govnl-hero-message-max-inline-size: 50%;
7
- --govnl-hero-message-border-radius: 20px;
8
- --govnl-hero-border-radius: 40px;
9
- --govnl-hero-message-row-gap: var(--govnl-space-4xs);
10
- --govnl-hero-message-padding-block-end: var(--govnl-space-sm);
11
- --govnl-hero-message-padding-block-start: var(--govnl-space-sm);
12
- --govnl-hero-message-padding-inline-start: var(--govnl-space-sm);
13
- --govnl-hero-message-padding-inline-end: var(--govnl-space-sm);
14
- --govnl-hero-message-background-color: var(--govnl-brand-primary-500);
15
- --govnl-hero-message-color: var(--govnl-document-inverse-color);
16
- --govnl-hero-heading-font-family: var(--govnl-heading-font-family);
17
- --govnl-hero-heading-font-weight: var(--govnl-heading-font-weight);
18
- --govnl-hero-heading-line-height: var(--govnl-heading-line-height);
19
- --govnl-hero-heading-font-size: var(--nl-heading-level-3-font-size);
20
- --govnl-hero-subheading-font-family: var(--govnl-document-font-family);
21
- --govnl-hero-subheading-font-weight: var(--govnl-document-font-weight);
22
- --govnl-hero-subheading-line-height: var(--govnl-document-line-height);
23
- --govnl-hero-subheading-font-size: var(--govnl-document-font-size);
24
- }
package/dist/icon.css DELETED
@@ -1,8 +0,0 @@
1
- /**
2
- * Do not edit directly, this file was auto-generated.
3
- */
4
-
5
- .dictu-icon {
6
- --govnl-icon-size: 1.5em;
7
- --govnl-icon-color: var(--govnl-document-color);
8
- }
package/dist/link-list.css DELETED
@@ -1,13 +0,0 @@
1
- /**
2
- * Do not edit directly, this file was auto-generated.
3
- */
4
-
5
- .dictu-link-list {
6
- --govnl-link-list-icon-inset-block-start: 0px;
7
- --govnl-link-list-icon-size: 1.125em;
8
- --govnl-link-list-link-text-decoration: None;
9
- --govnl-link-list-link-hover-text-decoration: underline;
10
- --govnl-link-list-row-gap: var(--govnl-gap-content-min) / 2;
11
- --govnl-link-list-link-column-gap: var(--govnl-gap-content-min) / 2;
12
- --govnl-link-list-font-weight: var(--govnl-document-font-weight);
13
- }
package/dist/link.css DELETED
@@ -1,24 +0,0 @@
1
- /**
2
- * Do not edit directly, this file was auto-generated.
3
- */
4
-
5
- .dictu-link {
6
- --nl-link-text-decoration-line: underline;
7
- --nl-link-text-decoration-thickness: max(1px, .0625rem);
8
- --nl-link-text-underline-offset: 0.1578em;
9
- --nl-link-active-text-decoration-line: underline;
10
- --nl-link-active-text-decoration-thickness: max(3px, .1875rem, .12em);
11
- --nl-link-current-cursor: default;
12
- --nl-link-disabled-cursor: disabled;
13
- --nl-link-focus-visible-text-decoration-line: underline;
14
- --nl-link-focus-visible-text-decoration-thickness: max(3px, .1875rem, .12em);
15
- --nl-link-hover-text-decoration-line: underline;
16
- --nl-link-hover-text-decoration-thickness: max(3px, .1875rem, .12em);
17
- --nl-link-disabled-color: var(--govnl-color-grijs-500);
18
- --nl-link-focus-visible-background-color: var(--govnl-focus-background-color);
19
- --nl-link-focus-visible-color: var(--govnl-focus-color);
20
- --nl-link-color: var(--govnl-interaction-color);
21
- --nl-link-text-decoration-color: var(--govnl-interaction-color);
22
- --nl-link-active-color: var(--govnl-interaction-active-color);
23
- --nl-link-hover-color: var(--govnl-interaction-hover-color);
24
- }
package/dist/logo.css DELETED
@@ -1,20 +0,0 @@
1
- /**
2
- * Do not edit directly, this file was auto-generated.
3
- */
4
-
5
- .dictu-logo {
6
- --govnl-logo-title-line-height: 1.063rem;
7
- --govnl-logo-title-font-size: 0.913rem;
8
- --govnl-logo-title-padding-block-start: 3.125rem;
9
- --govnl-logo-subtitle-line-height: 1rem;
10
- --govnl-logo-subtitle-font-size: 0.775rem;
11
- --govnl-logo-image-background-color: var(--govnl-color-white);
12
- --govnl-logo-image-inline-size: var(--govnl-lint-size-lint);
13
- --govnl-logo-image-block-size: var(--govnl-lint-size-2-lint);
14
- --govnl-logo-image-color: var(--govnl-color-lintblauw-500);
15
- --govnl-logo-title-font-weight: var(--govnl-typography-font-weight-semi-bold);
16
- --govnl-logo-subtitle-font-weight: var(--govnl-typography-font-weight-regular);
17
- --govnl-logo-column-gap: var(--govnl-lint-size-quarter-lint);
18
- --govnl-logo-font-family: var(--govnl-typography-font-family-sans);
19
- --govnl-logo-color: var(--govnl-color-lintblauw-500);
20
- }
package/dist/navigation-bar.css DELETED
@@ -1,39 +0,0 @@
1
- /**
2
- * Do not edit directly, this file was auto-generated.
3
- */
4
-
5
- .dictu-navigation-bar {
6
- --govnl-nav-bar-max-inline-size: 1280px;
7
- --govnl-nav-bar-padding-inline: 0px;
8
- --govnl-nav-bar-container-inline-size: 100%;
9
- --govnl-nav-bar-content-column-gap: 0px;
10
- --govnl-nav-bar-icon-size: 1.5em;
11
- --govnl-nav-bar-link-text-decoration: none;
12
- --govnl-nav-bar-menu-label-background-color: none;
13
- --govnl-nav-bar-mobile-max-inline-size: 100%;
14
- --govnl-nav-bar-border-block-end-width: var(--govnl-border-border-width-sm);
15
- --govnl-nav-bar-icon-color: var(--govnl-brand-primary-500);
16
- --govnl-nav-bar-icon-active-color: var(--govnl-brand-primary-500);
17
- --govnl-nav-bar-link-active-background-color: var(--govnl-brand-primary-500);
18
- --govnl-nav-bar-link-active-color: var(--govnl-document-inverse-color);
19
- --govnl-nav-bar-link-background-color: var(--govnl-document-background-color);
20
- --govnl-nav-bar-link-color: var(--govnl-brand-primary-500);
21
- --govnl-nav-bar-link-focus-background-color: var(--govnl-brand-primary-50);
22
- --govnl-nav-bar-link-focus-color: var(--govnl-brand-primary-500);
23
- --govnl-nav-bar-link-hover-background-color: var(--govnl-brand-primary-50);
24
- --govnl-nav-bar-link-hover-color: var(--govnl-brand-primary-500);
25
- --govnl-nav-bar-link-padding-block: var(--govnl-space-sm);
26
- --govnl-nav-bar-link-padding-inline: var(--govnl-space-xs);
27
- --govnl-nav-bar-link-column-gap: var(--govnl-gap-content-min) / 2;
28
- --govnl-nav-bar-background-color: var(--govnl-document-background-color);
29
- --govnl-nav-bar-color: var(--govnl-brand-primary-500);
30
- --govnl-nav-bar-border-color: var(--govnl-brand-primary-400);
31
- --govnl-nav-bar-search-padding-block: var(--govnl-space-xs);
32
- --govnl-nav-bar-search-padding-inline: var(--govnl-space-xs);
33
- --govnl-nav-bar-menu-label-gap: var(--govnl-gap-content-min) / 2;
34
- --govnl-nav-bar-menu-label-padding-inline: var(--govnl-space-sm);
35
- --govnl-nav-bar-menu-label-padding-block: var(--govnl-space-2xs);
36
- --govnl-nav-bar-menu-label-color: var(--govnl-brand-primary-500);
37
- --govnl-nav-bar-menu-label-font-size: var(--govnl-document-font-size);
38
- --govnl-nav-bar-font-size: var(--govnl-document-font-size);
39
- }
package/dist/page-footer.css DELETED
@@ -1,14 +0,0 @@
1
- /**
2
- * Do not edit directly, this file was auto-generated.
3
- */
4
-
5
- .dictu-page-footer {
6
- --govnl-page-footer-border-width: var(--govnl-border-border-width-sm);
7
- --govnl-page-footer-background-color: var(--govnl-root-background-color);
8
- --govnl-page-footer-color: var(--govnl-brand-primary-500);
9
- --govnl-page-footer-padding-block-start: var(--govnl-space-2xl);
10
- --govnl-page-footer-padding-block-end: var(--govnl-space-2xl);
11
- --govnl-page-footer-content-column-gap: calc(2 * var(--govnl-gap-content-min));
12
- --govnl-page-footer-content-row-gap: calc(1.5 * var(--govnl-gap-content-min));
13
- --govnl-page-footer-border-color: var(--govnl-brand-primary-200);
14
- }
package/dist/page-header.css DELETED
@@ -1,8 +0,0 @@
1
- /**
2
- * Do not edit directly, this file was auto-generated.
3
- */
4
-
5
- .dictu-page-header {
6
- --govnl-header-padding-block-end: var(--govnl-lint-size-half-lint);
7
- --govnl-header-background-color: var(--govnl-document-background-color);
8
- }
package/dist/paragraph.css DELETED
@@ -1,14 +0,0 @@
1
- /**
2
- * Do not edit directly, this file was auto-generated.
3
- */
4
-
5
- .dictu-paragraph {
6
- --nl-paragraph-color: var(--govnl-document-color);
7
- --nl-paragraph-font-family: var(--govnl-document-font-family);
8
- --nl-paragraph-font-size: var(--govnl-document-font-size);
9
- --nl-paragraph-font-weight: var(--govnl-document-font-weight);
10
- --nl-paragraph-line-height: var(--govnl-document-line-height);
11
- --nl-paragraph-lead-font-size: var(--govnl-document-font-size);
12
- --nl-paragraph-lead-font-weight: var(--govnl-document-strong-font-weight);
13
- --nl-paragraph-lead-line-height: var(--govnl-document-line-height);
14
- }
package/dist/section.css DELETED
@@ -1,7 +0,0 @@
1
- /**
2
- * Do not edit directly, this file was auto-generated.
3
- */
4
-
5
- .dictu-section {
6
- --govnl-section-margin-block-end: var(--govnl-dimension-size-1000);
7
- }
package/dist/skip-link.css DELETED
@@ -1,16 +0,0 @@
1
- /**
2
- * Do not edit directly, this file was auto-generated.
3
- */
4
-
5
- .dictu-skip-link {
6
- --nl-skip-link-text-decoration-thickness: 1px;
7
- --nl-skip-link-text-underline-offset: 1px;
8
- --nl-skip-link-min-block-size: var(--govnl-dimension-pointer-target-min-size);
9
- --nl-skip-link-min-inline-size: var(--govnl-dimension-pointer-target-min-size);
10
- --nl-skip-link-color: var(--govnl-document-inverse-color);
11
- --nl-skip-link-font-family: var(--govnl-document-font-family);
12
- --nl-skip-link-font-size: var(--govnl-document-font-size);
13
- --nl-skip-link-padding-block: var(--govnl-space-xs);
14
- --nl-skip-link-padding-inline: var(--govnl-space-sm);
15
- --nl-skip-link-background-color: var(--govnl-interaction-color);
16
- }
package/dist/timeline.css DELETED
@@ -1,34 +0,0 @@
1
- /**
2
- * Do not edit directly, this file was auto-generated.
3
- */
4
-
5
- .dictu-timeline {
6
- --govnl-timeline-border-color: none;
7
- --govnl-timeline-toggle-icon-lg-padding-inline-start: 0px;
8
- --govnl-timeline-toggle-icon-lg-padding-inline-end: 0px;
9
- --govnl-timeline-toggle-link-padding-block-start: 0px;
10
- --govnl-timeline-connector-padding-inline-end: 0px;
11
- --govnl-timeline-connector-margin-inline-start: 15px;
12
- --govnl-timeline-title-padding-block-start: 0px;
13
- --govnl-timeline-heading-text-decoration: none;
14
- --govnl-timeline-heading-hover-text-decoration: underline;
15
- --govnl-timeline-subheading-padding-block-start: 0px;
16
- --govnl-timeline-connector-border-width: var(--govnl-border-border-width-md);
17
- --govnl-timeline-border-radius: var(--govnl-border-border-radius-sm);
18
- --govnl-timeline-background-color: var(--govnl-root-background-color);
19
- --govnl-timeline-padding-block-start: var(--govnl-space-lg);
20
- --govnl-timeline-padding-block-end: var(--govnl-space-lg);
21
- --govnl-timeline-padding-inline-start: var(--govnl-space-lg);
22
- --govnl-timeline-padding-inline-end: var(--govnl-space-lg);
23
- --govnl-timeline-toggle-icon-sm-padding-inline-start: var(--govnl-space-3xs);
24
- --govnl-timeline-toggle-icon-sm-padding-inline-end: var(--govnl-space-3xs);
25
- --govnl-timeline-toggle-link-padding-block-end: var(--govnl-space-sm);
26
- --govnl-timeline-connector-color: var(--govnl-brand-primary-500);
27
- --govnl-timeline-connector-padding-inline-start: var(--govnl-space-sm);
28
- --govnl-timeline-title-padding-block-end: var(--govnl-space-sm);
29
- --govnl-timeline-heading-padding-block-start: var(--govnl-space-4xs);
30
- --govnl-timeline-heading-padding-block-end: var(--govnl-space-md);
31
- --govnl-timeline-subheading-padding-block-end: var(--govnl-space-2xs);
32
- --govnl-timeline-header-column-gap: var(--govnl-gap-content-min);
33
- --govnl-timeline-content-column-gap: var(--govnl-gap-content-min);
34
- }