@utrecht/component-library-css 1.0.0-alpha.304 → 1.0.0-alpha.307

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/dist/html.css +4 -0
  2. package/dist/index.css +94 -3
  3. package/package.json +3 -3
  4. package/src/index.scss +1 -0
package/dist/html.css CHANGED
@@ -418,6 +418,7 @@
418
418
  --utrecht-button-border-bottom-width,
419
419
  var(--utrecht-button-border-width, 0)
420
420
  );
421
+ align-items: center;
421
422
  background-color: var(--_utrecht-button-background-color);
422
423
  border-color: var(--_utrecht-button-border-color);
423
424
  border-bottom-color: var(--_utrecht-button-border-bottom-color);
@@ -425,11 +426,14 @@
425
426
  border-style: solid;
426
427
  border-width: var(--_utrecht-button-border-width);
427
428
  border-bottom-width: var(--_utrecht-button-border-bottom-width);
429
+ box-sizing: border-box;
428
430
  color: var(--utrecht-button-color);
431
+ display: inline-flex;
429
432
  font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
430
433
  font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
431
434
  font-weight: var(--utrecht-button-font-weight);
432
435
  inline-size: var(--utrecht-button-inline-size, auto);
436
+ justify-content: center;
433
437
  letter-spacing: var(--utrecht-button-letter-spacing);
434
438
  line-height: var(--utrecht-button-line-height);
435
439
  min-block-size: var(--utrecht-button-min-block-size, 44px);
package/dist/index.css CHANGED
@@ -432,6 +432,7 @@ ol.utrecht-breadcrumb__list {
432
432
  --utrecht-button-border-bottom-width,
433
433
  var(--utrecht-button-border-width, 0)
434
434
  );
435
+ align-items: center;
435
436
  background-color: var(--_utrecht-button-background-color);
436
437
  border-color: var(--_utrecht-button-border-color);
437
438
  border-bottom-color: var(--_utrecht-button-border-bottom-color);
@@ -439,11 +440,14 @@ ol.utrecht-breadcrumb__list {
439
440
  border-style: solid;
440
441
  border-width: var(--_utrecht-button-border-width);
441
442
  border-bottom-width: var(--_utrecht-button-border-bottom-width);
443
+ box-sizing: border-box;
442
444
  color: var(--utrecht-button-color);
445
+ display: inline-flex;
443
446
  font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
444
447
  font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
445
448
  font-weight: var(--utrecht-button-font-weight);
446
449
  inline-size: var(--utrecht-button-inline-size, auto);
450
+ justify-content: center;
447
451
  letter-spacing: var(--utrecht-button-letter-spacing);
448
452
  line-height: var(--utrecht-button-line-height);
449
453
  min-block-size: var(--utrecht-button-min-block-size, 44px);
@@ -697,6 +701,7 @@ ol.utrecht-breadcrumb__list {
697
701
  --utrecht-button-border-bottom-width,
698
702
  var(--utrecht-button-border-width, 0)
699
703
  );
704
+ align-items: center;
700
705
  background-color: var(--_utrecht-button-background-color);
701
706
  border-color: var(--_utrecht-button-border-color);
702
707
  border-bottom-color: var(--_utrecht-button-border-bottom-color);
@@ -704,11 +709,14 @@ ol.utrecht-breadcrumb__list {
704
709
  border-style: solid;
705
710
  border-width: var(--_utrecht-button-border-width);
706
711
  border-bottom-width: var(--_utrecht-button-border-bottom-width);
712
+ box-sizing: border-box;
707
713
  color: var(--utrecht-button-color);
714
+ display: inline-flex;
708
715
  font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
709
716
  font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
710
717
  font-weight: var(--utrecht-button-font-weight);
711
718
  inline-size: var(--utrecht-button-inline-size, auto);
719
+ justify-content: center;
712
720
  letter-spacing: var(--utrecht-button-letter-spacing);
713
721
  line-height: var(--utrecht-button-line-height);
714
722
  min-block-size: var(--utrecht-button-min-block-size, 44px);
@@ -745,18 +753,18 @@ ol.utrecht-breadcrumb__list {
745
753
  outline-width: var(--utrecht-focus-outline-width, 0);
746
754
  }
747
755
 
748
- .utrecht-button-link--html-button:hover {
756
+ .utrecht-button-link--html-a:hover {
749
757
  background-color: var(--_utrecht-button-hover-background-color);
750
758
  border-color: var(--_utrecht-button-hover-border-color);
751
759
  color: var(--_utrecht-button-hover-color);
752
760
  transform: scale(var(--utrecht-button-focus-transform-scale, 1));
753
761
  }
754
- .utrecht-button-link--html-button:focus {
762
+ .utrecht-button-link--html-a:focus {
755
763
  background-color: var(--_utrecht-button-focus-background-color);
756
764
  border-color: var(--_utrecht-button-focus-border-color);
757
765
  color: var(--_utrecht-button-focus-color);
758
766
  }
759
- .utrecht-button-link--html-button:focus-visible {
767
+ .utrecht-button-link--html-a:focus-visible {
760
768
  /* the pseudo-class for `:focus-visible` is implemented via the mixin */
761
769
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
762
770
  outline-color: var(--utrecht-focus-outline-color, transparent);
@@ -765,6 +773,63 @@ ol.utrecht-breadcrumb__list {
765
773
  outline-width: var(--utrecht-focus-outline-width, 0);
766
774
  }
767
775
 
776
+ .utrecht-button-link--primary-action {
777
+ --utrecht-button-active-background-color: var(--utrecht-button-primary-action-active-background-color);
778
+ --utrecht-button-active-border-color: var(--utrecht-button-primary-action-active-border-color);
779
+ --utrecht-button-active-color: var(--utrecht-button-primary-action-active-color);
780
+ --utrecht-button-background-color: var(--utrecht-button-primary-action-background-color);
781
+ --utrecht-button-border-color: var(--utrecht-button-primary-action-border-color);
782
+ --utrecht-button-border-width: var(--utrecht-button-primary-action-border-width);
783
+ --utrecht-button-color: var(--utrecht-button-primary-action-color);
784
+ --utrecht-button-disabled-background-color: var(--utrecht-button-primary-action-disabled-background-color);
785
+ --utrecht-button-disabled-border-color: var(--utrecht-button-primary-action-disabled-border-color);
786
+ --utrecht-button-disabled-color: var(--utrecht-button-primary-action-disabled-color);
787
+ --utrecht-button-focus-background-color: var(--utrecht-button-primary-action-focus-background-color);
788
+ --utrecht-button-focus-border-color: var(--utrecht-button-primary-action-focus-border-color);
789
+ --utrecht-button-focus-color: var(--utrecht-button-primary-action-focus-color);
790
+ --utrecht-button-hover-background-color: var(--utrecht-button-primary-action-hover-background-color);
791
+ --utrecht-button-hover-border-color: var(--utrecht-button-primary-action-hover-border-color);
792
+ --utrecht-button-hover-color: var(--utrecht-button-primary-action-hover-color);
793
+ }
794
+
795
+ .utrecht-button-link--secondary-action {
796
+ --utrecht-button-active-background-color: var(--utrecht-button-secondary-action-active-background-color);
797
+ --utrecht-button-active-border-color: var(--utrecht-button-secondary-action-active-border-color);
798
+ --utrecht-button-active-color: var(--utrecht-button-secondary-action-active-color);
799
+ --utrecht-button-background-color: var(--utrecht-button-secondary-action-background-color);
800
+ --utrecht-button-border-color: var(--utrecht-button-secondary-action-border-color);
801
+ --utrecht-button-border-width: var(--utrecht-button-secondary-action-border-width);
802
+ --utrecht-button-color: var(--utrecht-button-secondary-action-color);
803
+ --utrecht-button-disabled-background-color: var(--utrecht-button-secondary-action-disabled-background-color);
804
+ --utrecht-button-disabled-border-color: var(--utrecht-button-secondary-action-disabled-border-color);
805
+ --utrecht-button-disabled-color: var(--utrecht-button-secondary-action-disabled-color);
806
+ --utrecht-button-focus-background-color: var(--utrecht-button-secondary-action-focus-background-color);
807
+ --utrecht-button-focus-border-color: var(--utrecht-button-secondary-action-focus-border-color);
808
+ --utrecht-button-focus-color: var(--utrecht-button-secondary-action-focus-color);
809
+ --utrecht-button-hover-background-color: var(--utrecht-button-secondary-action-hover-background-color);
810
+ --utrecht-button-hover-border-color: var(--utrecht-button-secondary-action-hover-border-color);
811
+ --utrecht-button-hover-color: var(--utrecht-button-secondary-action-hover-color);
812
+ }
813
+
814
+ .utrecht-button-link--subtle {
815
+ --utrecht-button-active-background-color: var(--utrecht-button-subtle-active-background-color);
816
+ --utrecht-button-active-border-color: var(--utrecht-button-subtle-active-border-color);
817
+ --utrecht-button-active-color: var(--utrecht-button-subtle-active-color);
818
+ --utrecht-button-background-color: var(--utrecht-button-subtle-background-color);
819
+ --utrecht-button-border-color: var(--utrecht-button-subtle-border-color);
820
+ --utrecht-button-border-width: var(--utrecht-button-subtle-border-width);
821
+ --utrecht-button-color: var(--utrecht-button-subtle-color);
822
+ --utrecht-button-disabled-background-color: var(--utrecht-button-subtle-disabled-background-color);
823
+ --utrecht-button-disabled-border-color: var(--utrecht-button-subtle-disabled-border-color);
824
+ --utrecht-button-disabled-color: var(--utrecht-button-subtle-disabled-color);
825
+ --utrecht-button-focus-background-color: var(--utrecht-button-subtle-focus-background-color);
826
+ --utrecht-button-focus-border-color: var(--utrecht-button-subtle-focus-border-color);
827
+ --utrecht-button-focus-color: var(--utrecht-button-subtle-focus-color);
828
+ --utrecht-button-hover-background-color: var(--utrecht-button-subtle-hover-background-color);
829
+ --utrecht-button-hover-border-color: var(--utrecht-button-subtle-hover-border-color);
830
+ --utrecht-button-hover-color: var(--utrecht-button-subtle-hover-color);
831
+ }
832
+
768
833
  /**
769
834
  * @license EUPL-1.2
770
835
  * Copyright (c) 2021 Robbert Broersma
@@ -1881,6 +1946,32 @@ ol.utrecht-breadcrumb__list {
1881
1946
  margin-block-start: var(--utrecht-heading-6-margin-block-start);
1882
1947
  }
1883
1948
 
1949
+ /**
1950
+ * @license EUPL-1.2
1951
+ * Copyright (c) 2020-2022 Gemeente Utrecht
1952
+ * Copyright (c) 2020-2022 Frameless B.V.
1953
+ */
1954
+ /**
1955
+ * @license EUPL-1.2
1956
+ * Copyright (c) 2020-2022 Gemeente Utrecht
1957
+ * Copyright (c) 2020-2022 Frameless B.V.
1958
+ */
1959
+ .utrecht-img {
1960
+ height: auto;
1961
+ width: auto;
1962
+ }
1963
+
1964
+ .utrecht-img--scale-down {
1965
+ /* use this class name with caution, text contained in image might become too small to read */
1966
+ max-height: 100%;
1967
+ max-width: 100%;
1968
+ }
1969
+
1970
+ .utrecht-img--photo {
1971
+ max-height: 100%;
1972
+ max-width: 100%;
1973
+ }
1974
+
1884
1975
  /**
1885
1976
  * @license EUPL-1.2
1886
1977
  * Copyright (c) 2021 Gemeente Utrecht
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.0.0-alpha.304",
2
+ "version": "1.0.0-alpha.307",
3
3
  "author": "Community for NL Design System",
4
4
  "description": "Component library bundle for the Municipality of Utrecht based on the NL Design System architecture",
5
5
  "license": "EUPL-1.2",
@@ -16,7 +16,7 @@
16
16
  "url": "git@github.com:nl-design-system/utrecht.git"
17
17
  },
18
18
  "devDependencies": {
19
- "@utrecht/design-tokens": "1.0.0-alpha.297",
19
+ "@utrecht/design-tokens": "1.0.0-alpha.300",
20
20
  "node-sass-package-importer": "5.3.2",
21
21
  "rimraf": "3.0.2",
22
22
  "sass": "1.54.0"
@@ -27,5 +27,5 @@
27
27
  "clean": "rimraf dist/"
28
28
  },
29
29
  "main": "dist/index.css",
30
- "gitHead": "5e0eb8b75ca23c2063867f7396e6a6a5e50e0ba9"
30
+ "gitHead": "5b5af09a97a4d80406c3befbe73c9c3852845870"
31
31
  }
package/src/index.scss CHANGED
@@ -49,6 +49,7 @@
49
49
  @import "../../../components/heading-4/css";
50
50
  @import "../../../components/heading-5/css";
51
51
  @import "../../../components/heading-6/css";
52
+ @import "../../../components/img/css";
52
53
  @import "../../../components/link-list/css";
53
54
  @import "../../../components/link-button/css";
54
55
  @import "../../../components/link-social/css";