@dictu/design-tokens 2.2.0 → 2.3.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 (4) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/index.css +16 -16
  3. package/package.json +1 -1
  4. package/style-dictionary-build.mjs +2 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @dictu/design-tokens
2
2
 
3
+ ## 2.3.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 3df7fb8: Added list component and support in the rich text component
8
+ - 3df7fb8: new list component, applied in rich text component, updated button
9
+ and icon component, new design tokens
10
+
3
11
  ## 2.2.0
4
12
 
5
13
  ### Minor Changes
package/dist/index.css CHANGED
@@ -343,7 +343,7 @@
343
343
  --govnl-grid-template-columns-width: var(--govnl-dimension-size-2000);
344
344
  --govnl-figure-caption-font-size: var(--govnl-typography-font-size-sm);
345
345
  --govnl-figure-caption-line-height: var(--govnl-typography-line-height-sm);
346
- --govnl-container-max-inline-size: calc(8 * var(--govnl-dimension-size-2000));
346
+ --govnl-container-max-inline-size: 80rem;
347
347
  --govnl-container-padding-inline: var(--govnl-dimension-size-200);
348
348
  --govnl-card-default-hover-background-color: var(--govnl-color-grijs-100);
349
349
  --govnl-card-default-active-background-color: var(--govnl-color-grijs-200);
@@ -523,7 +523,7 @@
523
523
  --govnl-space-2xl: var(--govnl-dimension-size-600);
524
524
  --govnl-space-3xl: var(--govnl-dimension-size-800);
525
525
  --govnl-space-4xl: var(--govnl-dimension-size-1000);
526
- --govnl-content-inline-size: calc(5 * var(--govnl-dimension-size-2000));
526
+ --govnl-content-inline-size: 50rem;
527
527
  --nl-skip-link-min-block-size: var(--govnl-dimension-pointer-target-min-size);
528
528
  --nl-skip-link-min-inline-size: var(--govnl-dimension-pointer-target-min-size);
529
529
  --nl-paragraph-lead-font-size: var(--govnl-typography-font-size-xl);
@@ -578,8 +578,8 @@
578
578
  --govnl-page-footer-color: var(--govnl-brand-primary-1-500);
579
579
  --govnl-page-footer-padding-block-start: var(--govnl-space-2xl);
580
580
  --govnl-page-footer-padding-block-end: var(--govnl-space-2xl);
581
- --govnl-page-footer-content-column-gap: calc(2 * var(--govnl-gap-content-min));
582
- --govnl-page-footer-content-row-gap: calc(1.5 * var(--govnl-gap-content-min));
581
+ --govnl-page-footer-content-column-gap: 2rem;
582
+ --govnl-page-footer-content-row-gap: 1.5rem;
583
583
  --govnl-page-footer-border-color: var(--govnl-brand-primary-1-200);
584
584
  --govnl-nav-bar-icon-color: var(--govnl-brand-primary-1-500);
585
585
  --govnl-nav-bar-icon-active-color: var(--govnl-brand-primary-1-500);
@@ -593,13 +593,13 @@
593
593
  --govnl-nav-bar-link-hover-color: var(--govnl-brand-primary-1-500);
594
594
  --govnl-nav-bar-link-padding-block: var(--govnl-space-sm);
595
595
  --govnl-nav-bar-link-padding-inline: var(--govnl-space-xs);
596
- --govnl-nav-bar-link-column-gap: var(--govnl-gap-content-min) / 2;
596
+ --govnl-nav-bar-link-column-gap: 0.5rem;
597
597
  --govnl-nav-bar-background-color: var(--govnl-document-background-color);
598
598
  --govnl-nav-bar-color: var(--govnl-brand-primary-1-500);
599
599
  --govnl-nav-bar-border-color: var(--govnl-brand-primary-1-400);
600
600
  --govnl-nav-bar-search-padding-block: var(--govnl-space-xs);
601
601
  --govnl-nav-bar-search-padding-inline: var(--govnl-space-xs);
602
- --govnl-nav-bar-menu-label-gap: var(--govnl-gap-content-min) / 2;
602
+ --govnl-nav-bar-menu-label-gap: 0.5rem;
603
603
  --govnl-nav-bar-menu-label-padding-inline: var(--govnl-space-sm);
604
604
  --govnl-nav-bar-menu-label-padding-block: var(--govnl-space-2xs);
605
605
  --govnl-nav-bar-menu-label-color: var(--govnl-brand-primary-1-500);
@@ -613,8 +613,8 @@
613
613
  --govnl-nav-bar-submenu-padding-block-start: var(--govnl-space-lg);
614
614
  --govnl-nav-bar-submenu-padding-block-end: var(--govnl-space-lg);
615
615
  --govnl-nav-bar-submenu-background-color: var(--govnl-button-subtle-active-background-color);
616
- --govnl-link-list-row-gap: var(--govnl-gap-content-min) / 2;
617
- --govnl-link-list-link-column-gap: var(--govnl-gap-content-min) / 2;
616
+ --govnl-link-list-row-gap: 0.5rem;
617
+ --govnl-link-list-link-column-gap: 0.5rem;
618
618
  --govnl-link-list-font-weight: var(--govnl-document-font-weight);
619
619
  --govnl-icon-color: var(--govnl-document-color);
620
620
  --govnl-hero-message-row-gap: var(--govnl-space-4xs);
@@ -637,7 +637,7 @@
637
637
  --govnl-grid-gap-column-min: var(--govnl-gap-content-min);
638
638
  --govnl-grid-gap-column-max: var(--govnl-gap-content-max);
639
639
  --govnl-figure-caption-color: var(--govnl-document-color);
640
- --govnl-figure-row-gap: var(--govnl-gap-content-min) / 2;
640
+ --govnl-figure-row-gap: 0.5rem;
641
641
  --govnl-card-default-background-color: var(--govnl-document-background-color);
642
642
  --govnl-card-default-border-color: var(--govnl-line-subtle-border-color);
643
643
  --govnl-card-default-hover-border-color: var(--govnl-line-border-color);
@@ -659,9 +659,9 @@
659
659
  --govnl-card-accent-metadata-footer-color: var(--govnl-document-inverse-color);
660
660
  --govnl-card-accent-background-color: var(--govnl-brand-primary-1-500);
661
661
  --govnl-card-accent-color: var(--govnl-document-inverse-color);
662
- --govnl-card-accent-hover-background-color: var(--govnl-brand-primary-1-500);
662
+ --govnl-card-accent-hover-background-color: rgb(6.5882% 20.706% 36.078%);
663
663
  --govnl-card-accent-hover-color: var(--govnl-document-inverse-color);
664
- --govnl-card-accent-active-background-color: var(--govnl-brand-primary-1-500);
664
+ --govnl-card-accent-active-background-color: rgb(4.9412% 15.529% 27.059%);
665
665
  --govnl-card-accent-active-color: var(--govnl-document-inverse-color);
666
666
  --govnl-card-accent-focus-background-color: var(--govnl-focus-background-color);
667
667
  --govnl-card-accent-focus-color: var(--govnl-focus-color);
@@ -698,7 +698,7 @@
698
698
  --govnl-button-padding-block-start: var(--govnl-space-xs);
699
699
  --govnl-button-padding-inline-end: var(--govnl-space-sm);
700
700
  --govnl-button-padding-inline-start: var(--govnl-space-sm);
701
- --govnl-button-column-gap: var(--govnl-gap-content-min) / 2;
701
+ --govnl-button-column-gap: 0.5rem;
702
702
  --govnl-button-small-icon-only-padding-block-end: var(--govnl-space-2xs);
703
703
  --govnl-button-small-icon-only-padding-block-start: var(--govnl-space-2xs);
704
704
  --govnl-button-small-icon-only-padding-inline-start: var(--govnl-space-2xs);
@@ -707,7 +707,7 @@
707
707
  --govnl-button-small-padding-block-start: var(--govnl-space-2xs);
708
708
  --govnl-button-small-padding-inline-end: var(--govnl-space-xs);
709
709
  --govnl-button-small-padding-inline-start: var(--govnl-space-xs);
710
- --govnl-button-small-column-gap: var(--govnl-gap-content-min) / 4;
710
+ --govnl-button-small-column-gap: 0.25rem;
711
711
  --govnl-breadcrumb-nav-font-family: var(--govnl-document-font-family);
712
712
  --govnl-breadcrumb-nav-font-size: var(--govnl-document-font-size);
713
713
  --govnl-breadcrumb-nav-font-weight: var(--govnl-document-font-weight);
@@ -738,7 +738,7 @@
738
738
  --govnl-accordion-button-font-size: var(--govnl-document-font-size);
739
739
  --govnl-accordion-button-font-weight: var(--govnl-document-strong-font-weight);
740
740
  --govnl-accordion-button-line-height: var(--govnl-document-line-height);
741
- --govnl-accordion-button-gap: var(--govnl-gap-content-min) / 2;
741
+ --govnl-accordion-button-gap: 0.5rem;
742
742
  --govnl-accordion-button-icon-margin-inline: var(--govnl-space-xs);
743
743
  --govnl-accordion-button-icon-color: var(--govnl-interaction-color);
744
744
  --govnl-accordion-button-padding-block-end: var(--govnl-space-xs);
@@ -894,8 +894,8 @@
894
894
  --govnl-form-control-focus-border-color: var(--govnl-form-control-border-color);
895
895
  --govnl-form-control-invalid-border-color: var(--govnl-feedback-negative-border-color);
896
896
  --govnl-form-control-invalid-color: var(--govnl-feedback-negative-color);
897
- --govnl-interaction-active-color: var(--govnl-brand-primary-1-500);
898
- --govnl-interaction-hover-color: var(--govnl-brand-primary-1-500);
897
+ --govnl-interaction-active-color: rgb(4.9412% 15.529% 27.059%);
898
+ --govnl-interaction-hover-color: rgb(6.5882% 20.706% 36.078%);
899
899
  --nl-skip-link-background-color: var(--govnl-interaction-color);
900
900
  --nl-skip-link-color: var(--govnl-document-inverse-color);
901
901
  --nl-skip-link-font-family: var(--govnl-document-font-family);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dictu/design-tokens",
3
- "version": "2.2.0",
3
+ "version": "2.3.0",
4
4
  "author": "Dienst ICT Uitvoering",
5
5
  "description": "Design Tokens for DICTU Design system, based on the NL Design System architecture",
6
6
  "license": "SEE LICENSE IN LICENSE.md",
package/style-dictionary-build.mjs CHANGED
@@ -1,4 +1,5 @@
1
1
  import { register } from '@tokens-studio/sd-transforms';
2
+ import { outputReferencesTransformed } from 'style-dictionary/utils';
2
3
  import { globSync } from 'glob';
3
4
  import StyleDictionary from 'style-dictionary';
4
5
 
@@ -23,7 +24,7 @@ const sd = new StyleDictionary({
23
24
  format: 'css/variables',
24
25
  options: {
25
26
  selector: '.dictu-theme',
26
- outputReferences: true,
27
+ outputReferences: outputReferencesTransformed,
27
28
  },
28
29
  },
29
30
  ],