@utrecht/component-library-css 1.0.0-alpha.305 → 1.0.0-alpha.308

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 +6 -0
  2. package/dist/index.css +123 -3
  3. package/package.json +3 -3
  4. package/src/index.scss +2 -0
package/dist/html.css CHANGED
@@ -418,6 +418,8 @@
418
418
  --utrecht-button-border-bottom-width,
419
419
  var(--utrecht-button-border-width, 0)
420
420
  );
421
+ --utrecht-icon-size: var(--utrecht-button-icon-size, 1em);
422
+ align-items: center;
421
423
  background-color: var(--_utrecht-button-background-color);
422
424
  border-color: var(--_utrecht-button-border-color);
423
425
  border-bottom-color: var(--_utrecht-button-border-bottom-color);
@@ -425,11 +427,15 @@
425
427
  border-style: solid;
426
428
  border-width: var(--_utrecht-button-border-width);
427
429
  border-bottom-width: var(--_utrecht-button-border-bottom-width);
430
+ box-sizing: border-box;
428
431
  color: var(--utrecht-button-color);
432
+ display: inline-flex;
429
433
  font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
430
434
  font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
431
435
  font-weight: var(--utrecht-button-font-weight);
436
+ gap: var(--utrecht-button-icon-gap);
432
437
  inline-size: var(--utrecht-button-inline-size, auto);
438
+ justify-content: center;
433
439
  letter-spacing: var(--utrecht-button-letter-spacing);
434
440
  line-height: var(--utrecht-button-line-height);
435
441
  min-block-size: var(--utrecht-button-min-block-size, 44px);
package/dist/index.css CHANGED
@@ -432,6 +432,8 @@ ol.utrecht-breadcrumb__list {
432
432
  --utrecht-button-border-bottom-width,
433
433
  var(--utrecht-button-border-width, 0)
434
434
  );
435
+ --utrecht-icon-size: var(--utrecht-button-icon-size, 1em);
436
+ align-items: center;
435
437
  background-color: var(--_utrecht-button-background-color);
436
438
  border-color: var(--_utrecht-button-border-color);
437
439
  border-bottom-color: var(--_utrecht-button-border-bottom-color);
@@ -439,11 +441,15 @@ ol.utrecht-breadcrumb__list {
439
441
  border-style: solid;
440
442
  border-width: var(--_utrecht-button-border-width);
441
443
  border-bottom-width: var(--_utrecht-button-border-bottom-width);
444
+ box-sizing: border-box;
442
445
  color: var(--utrecht-button-color);
446
+ display: inline-flex;
443
447
  font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
444
448
  font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
445
449
  font-weight: var(--utrecht-button-font-weight);
450
+ gap: var(--utrecht-button-icon-gap);
446
451
  inline-size: var(--utrecht-button-inline-size, auto);
452
+ justify-content: center;
447
453
  letter-spacing: var(--utrecht-button-letter-spacing);
448
454
  line-height: var(--utrecht-button-line-height);
449
455
  min-block-size: var(--utrecht-button-min-block-size, 44px);
@@ -697,6 +703,8 @@ ol.utrecht-breadcrumb__list {
697
703
  --utrecht-button-border-bottom-width,
698
704
  var(--utrecht-button-border-width, 0)
699
705
  );
706
+ --utrecht-icon-size: var(--utrecht-button-icon-size, 1em);
707
+ align-items: center;
700
708
  background-color: var(--_utrecht-button-background-color);
701
709
  border-color: var(--_utrecht-button-border-color);
702
710
  border-bottom-color: var(--_utrecht-button-border-bottom-color);
@@ -704,11 +712,15 @@ ol.utrecht-breadcrumb__list {
704
712
  border-style: solid;
705
713
  border-width: var(--_utrecht-button-border-width);
706
714
  border-bottom-width: var(--_utrecht-button-border-bottom-width);
715
+ box-sizing: border-box;
707
716
  color: var(--utrecht-button-color);
717
+ display: inline-flex;
708
718
  font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
709
719
  font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
710
720
  font-weight: var(--utrecht-button-font-weight);
721
+ gap: var(--utrecht-button-icon-gap);
711
722
  inline-size: var(--utrecht-button-inline-size, auto);
723
+ justify-content: center;
712
724
  letter-spacing: var(--utrecht-button-letter-spacing);
713
725
  line-height: var(--utrecht-button-line-height);
714
726
  min-block-size: var(--utrecht-button-min-block-size, 44px);
@@ -745,18 +757,18 @@ ol.utrecht-breadcrumb__list {
745
757
  outline-width: var(--utrecht-focus-outline-width, 0);
746
758
  }
747
759
 
748
- .utrecht-button-link--html-button:hover {
760
+ .utrecht-button-link--html-a:hover {
749
761
  background-color: var(--_utrecht-button-hover-background-color);
750
762
  border-color: var(--_utrecht-button-hover-border-color);
751
763
  color: var(--_utrecht-button-hover-color);
752
764
  transform: scale(var(--utrecht-button-focus-transform-scale, 1));
753
765
  }
754
- .utrecht-button-link--html-button:focus {
766
+ .utrecht-button-link--html-a:focus {
755
767
  background-color: var(--_utrecht-button-focus-background-color);
756
768
  border-color: var(--_utrecht-button-focus-border-color);
757
769
  color: var(--_utrecht-button-focus-color);
758
770
  }
759
- .utrecht-button-link--html-button:focus-visible {
771
+ .utrecht-button-link--html-a:focus-visible {
760
772
  /* the pseudo-class for `:focus-visible` is implemented via the mixin */
761
773
  box-shadow: 0 0 0 var(--utrecht-focus-box-shadow-spread-radius, 0) var(--utrecht-focus-box-shadow-color, transparent);
762
774
  outline-color: var(--utrecht-focus-outline-color, transparent);
@@ -765,6 +777,63 @@ ol.utrecht-breadcrumb__list {
765
777
  outline-width: var(--utrecht-focus-outline-width, 0);
766
778
  }
767
779
 
780
+ .utrecht-button-link--primary-action {
781
+ --utrecht-button-active-background-color: var(--utrecht-button-primary-action-active-background-color);
782
+ --utrecht-button-active-border-color: var(--utrecht-button-primary-action-active-border-color);
783
+ --utrecht-button-active-color: var(--utrecht-button-primary-action-active-color);
784
+ --utrecht-button-background-color: var(--utrecht-button-primary-action-background-color);
785
+ --utrecht-button-border-color: var(--utrecht-button-primary-action-border-color);
786
+ --utrecht-button-border-width: var(--utrecht-button-primary-action-border-width);
787
+ --utrecht-button-color: var(--utrecht-button-primary-action-color);
788
+ --utrecht-button-disabled-background-color: var(--utrecht-button-primary-action-disabled-background-color);
789
+ --utrecht-button-disabled-border-color: var(--utrecht-button-primary-action-disabled-border-color);
790
+ --utrecht-button-disabled-color: var(--utrecht-button-primary-action-disabled-color);
791
+ --utrecht-button-focus-background-color: var(--utrecht-button-primary-action-focus-background-color);
792
+ --utrecht-button-focus-border-color: var(--utrecht-button-primary-action-focus-border-color);
793
+ --utrecht-button-focus-color: var(--utrecht-button-primary-action-focus-color);
794
+ --utrecht-button-hover-background-color: var(--utrecht-button-primary-action-hover-background-color);
795
+ --utrecht-button-hover-border-color: var(--utrecht-button-primary-action-hover-border-color);
796
+ --utrecht-button-hover-color: var(--utrecht-button-primary-action-hover-color);
797
+ }
798
+
799
+ .utrecht-button-link--secondary-action {
800
+ --utrecht-button-active-background-color: var(--utrecht-button-secondary-action-active-background-color);
801
+ --utrecht-button-active-border-color: var(--utrecht-button-secondary-action-active-border-color);
802
+ --utrecht-button-active-color: var(--utrecht-button-secondary-action-active-color);
803
+ --utrecht-button-background-color: var(--utrecht-button-secondary-action-background-color);
804
+ --utrecht-button-border-color: var(--utrecht-button-secondary-action-border-color);
805
+ --utrecht-button-border-width: var(--utrecht-button-secondary-action-border-width);
806
+ --utrecht-button-color: var(--utrecht-button-secondary-action-color);
807
+ --utrecht-button-disabled-background-color: var(--utrecht-button-secondary-action-disabled-background-color);
808
+ --utrecht-button-disabled-border-color: var(--utrecht-button-secondary-action-disabled-border-color);
809
+ --utrecht-button-disabled-color: var(--utrecht-button-secondary-action-disabled-color);
810
+ --utrecht-button-focus-background-color: var(--utrecht-button-secondary-action-focus-background-color);
811
+ --utrecht-button-focus-border-color: var(--utrecht-button-secondary-action-focus-border-color);
812
+ --utrecht-button-focus-color: var(--utrecht-button-secondary-action-focus-color);
813
+ --utrecht-button-hover-background-color: var(--utrecht-button-secondary-action-hover-background-color);
814
+ --utrecht-button-hover-border-color: var(--utrecht-button-secondary-action-hover-border-color);
815
+ --utrecht-button-hover-color: var(--utrecht-button-secondary-action-hover-color);
816
+ }
817
+
818
+ .utrecht-button-link--subtle {
819
+ --utrecht-button-active-background-color: var(--utrecht-button-subtle-active-background-color);
820
+ --utrecht-button-active-border-color: var(--utrecht-button-subtle-active-border-color);
821
+ --utrecht-button-active-color: var(--utrecht-button-subtle-active-color);
822
+ --utrecht-button-background-color: var(--utrecht-button-subtle-background-color);
823
+ --utrecht-button-border-color: var(--utrecht-button-subtle-border-color);
824
+ --utrecht-button-border-width: var(--utrecht-button-subtle-border-width);
825
+ --utrecht-button-color: var(--utrecht-button-subtle-color);
826
+ --utrecht-button-disabled-background-color: var(--utrecht-button-subtle-disabled-background-color);
827
+ --utrecht-button-disabled-border-color: var(--utrecht-button-subtle-disabled-border-color);
828
+ --utrecht-button-disabled-color: var(--utrecht-button-subtle-disabled-color);
829
+ --utrecht-button-focus-background-color: var(--utrecht-button-subtle-focus-background-color);
830
+ --utrecht-button-focus-border-color: var(--utrecht-button-subtle-focus-border-color);
831
+ --utrecht-button-focus-color: var(--utrecht-button-subtle-focus-color);
832
+ --utrecht-button-hover-background-color: var(--utrecht-button-subtle-hover-background-color);
833
+ --utrecht-button-hover-border-color: var(--utrecht-button-subtle-hover-border-color);
834
+ --utrecht-button-hover-color: var(--utrecht-button-subtle-hover-color);
835
+ }
836
+
768
837
  /**
769
838
  * @license EUPL-1.2
770
839
  * Copyright (c) 2021 Robbert Broersma
@@ -1881,6 +1950,51 @@ ol.utrecht-breadcrumb__list {
1881
1950
  margin-block-start: var(--utrecht-heading-6-margin-block-start);
1882
1951
  }
1883
1952
 
1953
+ /**
1954
+ * @license EUPL-1.2
1955
+ * Copyright (c) 2021-2022 Gemeente Utrecht
1956
+ * Copyright (c) 2021-2022 Frameless B.V.
1957
+ */
1958
+ /**
1959
+ * @license EUPL-1.2
1960
+ * Copyright (c) 2021-2022 Gemeente Utrecht
1961
+ * Copyright (c) 2021-2022 Frameless B.V.
1962
+ */
1963
+ .utrecht-icon {
1964
+ color: var(--utrecht-icon-color);
1965
+ display: inline-block;
1966
+ height: var(--utrecht-icon-size);
1967
+ inset-block-start: var(--utrecht-icon-inset-block-start, 0);
1968
+ position: relative;
1969
+ width: var(--utrecht-icon-size);
1970
+ }
1971
+
1972
+ /**
1973
+ * @license EUPL-1.2
1974
+ * Copyright (c) 2020-2022 Gemeente Utrecht
1975
+ * Copyright (c) 2020-2022 Frameless B.V.
1976
+ */
1977
+ /**
1978
+ * @license EUPL-1.2
1979
+ * Copyright (c) 2020-2022 Gemeente Utrecht
1980
+ * Copyright (c) 2020-2022 Frameless B.V.
1981
+ */
1982
+ .utrecht-img {
1983
+ height: auto;
1984
+ width: auto;
1985
+ }
1986
+
1987
+ .utrecht-img--scale-down {
1988
+ /* use this class name with caution, text contained in image might become too small to read */
1989
+ max-height: 100%;
1990
+ max-width: 100%;
1991
+ }
1992
+
1993
+ .utrecht-img--photo {
1994
+ max-height: 100%;
1995
+ max-width: 100%;
1996
+ }
1997
+
1884
1998
  /**
1885
1999
  * @license EUPL-1.2
1886
2000
  * Copyright (c) 2021 Gemeente Utrecht
@@ -2030,13 +2144,18 @@ however browsers don't seem to have implemented great looking supixel tweening y
2030
2144
  text-decoration-skip-ink: all;
2031
2145
  text-decoration-thickness: max(var(--utrecht-link-text-decoration-thickness), 1px);
2032
2146
  text-underline-offset: var(--utrecht-link-text-underline-offset);
2147
+ --utrecht-icon-size: var(--utrecht-button-icon-size, 1em);
2148
+ align-items: center;
2033
2149
  cursor: pointer;
2034
2150
  display: inline-flex;
2035
2151
  font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
2036
2152
  font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
2037
2153
  font-weight: var(--utrecht-button-font-weight);
2154
+ gap: var(--utrecht-button-icon-gap);
2038
2155
  inline-size: var(--utrecht-button-inline-size, auto);
2156
+ justify-content: center;
2039
2157
  letter-spacing: var(--utrecht-button-letter-spacing);
2158
+ line-height: inherit;
2040
2159
  min-block-size: var(--utrecht-button-min-block-size, 44px);
2041
2160
  min-inline-size: var(--utrecht-button-min-inline-size, 44px);
2042
2161
  padding-block-end: var(--utrecht-button-padding-block-end);
@@ -2077,6 +2196,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
2077
2196
  }
2078
2197
 
2079
2198
  .utrecht-link-button--inline {
2199
+ --utrecht-icon-inset-block-start: var(--utrecht-icon-baseline-inset-block-start);
2080
2200
  min-block-size: auto;
2081
2201
  min-inline-size: auto;
2082
2202
  padding-block-end: 0;
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.0.0-alpha.305",
2
+ "version": "1.0.0-alpha.308",
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.298",
19
+ "@utrecht/design-tokens": "1.0.0-alpha.301",
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": "f72e10efbcc67f29f38e9c3dd1f51bbbaa298aac"
30
+ "gitHead": "5c31ea600fbee226c7d49b4e1cf10d026884fb66"
31
31
  }
package/src/index.scss CHANGED
@@ -49,6 +49,8 @@
49
49
  @import "../../../components/heading-4/css";
50
50
  @import "../../../components/heading-5/css";
51
51
  @import "../../../components/heading-6/css";
52
+ @import "../../../components/icon/css";
53
+ @import "../../../components/img/css";
52
54
  @import "../../../components/link-list/css";
53
55
  @import "../../../components/link-button/css";
54
56
  @import "../../../components/link-social/css";