@oslokommune/punkt-css 12.40.0 → 12.40.3

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 (11) hide show
  1. package/CHANGELOG.md +39 -0
  2. package/dist/css/components/card.css +15 -14
  3. package/dist/css/components/card.min.css +1 -1
  4. package/dist/css/pkt-components.css +15 -14
  5. package/dist/css/pkt-components.min.css +1 -1
  6. package/dist/css/pkt-docs.css +15 -14
  7. package/dist/css/pkt-docs.min.css +1 -1
  8. package/dist/css/pkt.css +15 -14
  9. package/dist/css/pkt.min.css +1 -1
  10. package/dist/scss/components/_card.scss +9 -8
  11. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -5,6 +5,45 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
5
5
 
6
6
  ---
7
7
 
8
+ ## [12.40.3](https://github.com/oslokommune/punkt/compare/12.40.2...12.40.3) (2025-05-20)
9
+
10
+ ### ⚠ BREAKING CHANGES
11
+ Ingen
12
+
13
+ ### Features
14
+ Ingen
15
+
16
+ ### Bug Fixes
17
+ Ingen
18
+
19
+ ### Chores
20
+ * update propnames for cards (#2574). - direction til layout
21
+ - portrait til vertical
22
+ - landscape til horizontal
23
+ - padding: standard til padding: default
24
+
25
+
26
+ ---
27
+
28
+
29
+ ## [12.40.2](https://github.com/oslokommune/punkt/compare/12.40.1...12.40.2) (2025-05-20)
30
+
31
+ ### ⚠ BREAKING CHANGES
32
+ Ingen
33
+
34
+ ### Features
35
+ Ingen
36
+
37
+ ### Bug Fixes
38
+ * always blue + purple outline on focus (#2573).
39
+
40
+
41
+ ### Chores
42
+ Ingen
43
+
44
+ ---
45
+
46
+
8
47
  ## [12.40.0](https://github.com/oslokommune/punkt/compare/12.39.8...12.40.0) (2025-05-19)
9
48
 
10
49
  ### ⚠ BREAKING CHANGES
package/dist/css/components/card.css CHANGED
@@ -71,15 +71,15 @@ pkt-card {
71
71
  margin-top: 0.5rem;
72
72
  margin-bottom: 0;
73
73
  }
74
- .pkt-card.pkt-card--landscape {
74
+ .pkt-card.pkt-card--horizontal {
75
75
  flex-direction: row;
76
76
  }
77
77
  @media screen and (max-width: 36rem) {
78
- .pkt-card.pkt-card--landscape {
78
+ .pkt-card.pkt-card--horizontal {
79
79
  flex-direction: column;
80
80
  }
81
81
  }
82
- .pkt-card.pkt-card--portrait {
82
+ .pkt-card.pkt-card--vertical {
83
83
  flex-direction: column;
84
84
  min-width: 12.5rem;
85
85
  }
@@ -102,32 +102,32 @@ pkt-card {
102
102
  max-height: 400px;
103
103
  max-width: 400px;
104
104
  }
105
- .pkt-card.pkt-card--landscape .pkt-card__image {
105
+ .pkt-card.pkt-card--horizontal .pkt-card__image {
106
106
  max-width: 400px;
107
107
  margin-right: 2rem;
108
108
  }
109
- .pkt-card.pkt-card--landscape .pkt-card__image-square {
109
+ .pkt-card.pkt-card--horizontal .pkt-card__image-square {
110
110
  align-self: stretch;
111
111
  }
112
112
  @media screen and (max-width: 36rem) {
113
- .pkt-card.pkt-card--landscape .pkt-card__image {
113
+ .pkt-card.pkt-card--horizontal .pkt-card__image {
114
114
  margin-right: 0;
115
115
  margin-bottom: 2rem;
116
116
  max-height: 400px;
117
117
  }
118
- .pkt-card.pkt-card--landscape .pkt-card__image-square {
118
+ .pkt-card.pkt-card--horizontal .pkt-card__image-square {
119
119
  max-width: unset;
120
120
  }
121
121
  }
122
- .pkt-card.pkt-card--portrait .pkt-card__image {
122
+ .pkt-card.pkt-card--vertical .pkt-card__image {
123
123
  margin-bottom: 2rem;
124
124
  max-height: 400px;
125
125
  }
126
- .pkt-card.pkt-card--padding-none.pkt-card--portrait .pkt-card__image-square {
126
+ .pkt-card.pkt-card--padding-none.pkt-card--vertical .pkt-card__image-square {
127
127
  aspect-ratio: 19/10;
128
128
  }
129
129
  @media screen and (max-width: 36rem) {
130
- .pkt-card.pkt-card--padding-none.pkt-card--landscape .pkt-card__image-square {
130
+ .pkt-card.pkt-card--padding-none.pkt-card--horizontal .pkt-card__image-square {
131
131
  aspect-ratio: 19/10;
132
132
  }
133
133
  }
@@ -163,21 +163,22 @@ pkt-card {
163
163
  }
164
164
  .pkt-card .pkt-card__wrapper .pkt-card__link:focus-visible::before {
165
165
  box-shadow: 0px 0px 0px 4px var(--pkt-color-brand-purple-1000);
166
+ outline-color: var(--pkt-color-brand-warm-blue-1000);
166
167
  }
167
168
  .pkt-card.pkt-card--padding-none {
168
169
  outline: none;
169
170
  background-color: transparent;
170
171
  }
171
- .pkt-card.pkt-card--padding-none.pkt-card--landscape.pkt-card--gray {
172
+ .pkt-card.pkt-card--padding-none.pkt-card--horizontal.pkt-card--gray {
172
173
  background-color: var(--pkt-color-brand-neutrals-100);
173
174
  }
174
- .pkt-card.pkt-card--padding-none.pkt-card--landscape.pkt-card--blue {
175
+ .pkt-card.pkt-card--padding-none.pkt-card--horizontal.pkt-card--blue {
175
176
  background-color: var(--pkt-color-brand-blue-200);
176
177
  }
177
- .pkt-card.pkt-card--padding-none.pkt-card--landscape.pkt-card--green {
178
+ .pkt-card.pkt-card--padding-none.pkt-card--horizontal.pkt-card--green {
178
179
  background-color: var(--pkt-color-brand-light-green-400);
179
180
  }
180
- .pkt-card.pkt-card--padding-none.pkt-card--landscape.pkt-card--beige {
181
+ .pkt-card.pkt-card--padding-none.pkt-card--horizontal.pkt-card--beige {
181
182
  background-color: var(--pkt-color-brand-light-beige-1000);
182
183
  }
183
184
  .pkt-card--outlined, .pkt-card--outlined-beige {
package/dist/css/components/card.min.css CHANGED
@@ -1 +1 @@
1
- pkt-card{display:block;width:100%}.pkt-card{position:relative;display:flex;align-items:center;width:100%;min-width:12.5rem;padding:2rem}.pkt-card .pkt-card__wrapper{display:flex;flex-direction:column;flex:1 1 53%;width:100%;overflow:hidden}.pkt-card.pkt-card--padding-none{padding:0}.pkt-card .pkt-card__heading h1,.pkt-card .pkt-card__heading h2,.pkt-card .pkt-card__heading h3,.pkt-card .pkt-card__heading h4,.pkt-card .pkt-card__heading h5{padding:0;margin:0;font-size:1.875rem;font-weight:400;margin-bottom:.5rem;hyphens:auto;overflow-wrap:break-word}.pkt-card .pkt-card__link{text-decoration-thickness:.12rem;text-underline-offset:.15em}.pkt-card p.pkt-card__subheading{padding:0;margin:0;line-height:unset;margin-bottom:1rem;font-size:1.25rem;font-weight:300;hyphens:auto;overflow-wrap:break-word}.pkt-card .pkt-card__metadata{margin-top:1rem;margin-bottom:0;line-height:unset;gap:.5rem}.pkt-card .pkt-card__metadata-lead{font-weight:500}.pkt-card .pkt-card__tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:.5rem;margin-top:0}.pkt-card .pkt-card__tags-bottom{margin-top:.5rem;margin-bottom:0}.pkt-card.pkt-card--landscape{flex-direction:row}@media screen and (max-width: 36rem){.pkt-card.pkt-card--landscape{flex-direction:column}}.pkt-card.pkt-card--portrait{flex-direction:column;min-width:12.5rem}.pkt-card .pkt-card__image{aspect-ratio:1;flex:1 1 47%;width:100%;overflow:hidden}.pkt-card .pkt-card__image img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.pkt-card .pkt-card__image.pkt-card__image-round{border-radius:50%;align-self:unset;max-height:400px;max-width:400px}.pkt-card.pkt-card--landscape .pkt-card__image{max-width:400px;margin-right:2rem}.pkt-card.pkt-card--landscape .pkt-card__image-square{align-self:stretch}@media screen and (max-width: 36rem){.pkt-card.pkt-card--landscape .pkt-card__image{margin-right:0;margin-bottom:2rem;max-height:400px}.pkt-card.pkt-card--landscape .pkt-card__image-square{max-width:unset}}.pkt-card.pkt-card--portrait .pkt-card__image{margin-bottom:2rem;max-height:400px}.pkt-card.pkt-card--padding-none.pkt-card--portrait .pkt-card__image-square{aspect-ratio:19/10}@media screen and (max-width: 36rem){.pkt-card.pkt-card--padding-none.pkt-card--landscape .pkt-card__image-square{aspect-ratio:19/10}}.pkt-card .pkt-card__wrapper .pkt-card__link::before{content:"";position:absolute;inset:0;z-index:1;box-shadow:0px 0px 0px 0px rgba(0,0,0,0);outline:2px solid var(--pkt-color-brand-warm-blue-1000);outline-offset:-2px;outline-color:rgba(0,0,0,0);transition:all .3s ease-in-out}.pkt-card .pkt-card__link-heading{transition:color .2s ease-in-out,text-decoration-color .2s ease-in-out}.pkt-card:hover.pkt-card--border-on-hover .pkt-card__link::before,.pkt-card:focus-visible.pkt-card--border-on-hover .pkt-card__link::before,.pkt-card:focus-within.pkt-card--border-on-hover .pkt-card__link::before{cursor:pointer;outline-color:var(--pkt-color-brand-warm-blue-1000)}.pkt-card:hover .pkt-card__link-heading,.pkt-card:focus-visible .pkt-card__link-heading,.pkt-card:focus-within .pkt-card__link-heading{color:var(--pkt-color-brand-warm-blue-1000);text-decoration-color:var(--pkt-color-brand-warm-blue-1000)}.pkt-card .pkt-card__link:focus{outline:none;box-shadow:none}.pkt-card .pkt-card__link-heading:focus-within{color:var(--pkt-color-brand-warm-blue-1000);text-decoration-color:var(--pkt-color-brand-warm-blue-1000)}.pkt-card .pkt-card__wrapper .pkt-card__link:focus-visible::before{box-shadow:0px 0px 0px 4px var(--pkt-color-brand-purple-1000)}.pkt-card.pkt-card--padding-none{outline:none;background-color:rgba(0,0,0,0)}.pkt-card.pkt-card--padding-none.pkt-card--landscape.pkt-card--gray{background-color:var(--pkt-color-brand-neutrals-100)}.pkt-card.pkt-card--padding-none.pkt-card--landscape.pkt-card--blue{background-color:var(--pkt-color-brand-blue-200)}.pkt-card.pkt-card--padding-none.pkt-card--landscape.pkt-card--green{background-color:var(--pkt-color-brand-light-green-400)}.pkt-card.pkt-card--padding-none.pkt-card--landscape.pkt-card--beige{background-color:var(--pkt-color-brand-light-beige-1000)}.pkt-card--outlined,.pkt-card--outlined-beige{background-color:var(--pkt-color-background-default);outline-offset:-4px}.pkt-card--outlined{outline:4px solid var(--pkt-color-grays-gray-100)}.pkt-card--outlined-beige{outline:4px solid var(--pkt-color-brand-light-beige-1000)}.pkt-card--gray{background-color:var(--pkt-color-brand-neutrals-100)}.pkt-card--blue{background-color:var(--pkt-color-brand-blue-200)}.pkt-card--green{background-color:var(--pkt-color-brand-light-green-400)}.pkt-card--beige{background-color:var(--pkt-color-brand-light-beige-1000)}
1
+ pkt-card{display:block;width:100%}.pkt-card{position:relative;display:flex;align-items:center;width:100%;min-width:12.5rem;padding:2rem}.pkt-card .pkt-card__wrapper{display:flex;flex-direction:column;flex:1 1 53%;width:100%;overflow:hidden}.pkt-card.pkt-card--padding-none{padding:0}.pkt-card .pkt-card__heading h1,.pkt-card .pkt-card__heading h2,.pkt-card .pkt-card__heading h3,.pkt-card .pkt-card__heading h4,.pkt-card .pkt-card__heading h5{padding:0;margin:0;font-size:1.875rem;font-weight:400;margin-bottom:.5rem;hyphens:auto;overflow-wrap:break-word}.pkt-card .pkt-card__link{text-decoration-thickness:.12rem;text-underline-offset:.15em}.pkt-card p.pkt-card__subheading{padding:0;margin:0;line-height:unset;margin-bottom:1rem;font-size:1.25rem;font-weight:300;hyphens:auto;overflow-wrap:break-word}.pkt-card .pkt-card__metadata{margin-top:1rem;margin-bottom:0;line-height:unset;gap:.5rem}.pkt-card .pkt-card__metadata-lead{font-weight:500}.pkt-card .pkt-card__tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:.5rem;margin-top:0}.pkt-card .pkt-card__tags-bottom{margin-top:.5rem;margin-bottom:0}.pkt-card.pkt-card--horizontal{flex-direction:row}@media screen and (max-width: 36rem){.pkt-card.pkt-card--horizontal{flex-direction:column}}.pkt-card.pkt-card--vertical{flex-direction:column;min-width:12.5rem}.pkt-card .pkt-card__image{aspect-ratio:1;flex:1 1 47%;width:100%;overflow:hidden}.pkt-card .pkt-card__image img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.pkt-card .pkt-card__image.pkt-card__image-round{border-radius:50%;align-self:unset;max-height:400px;max-width:400px}.pkt-card.pkt-card--horizontal .pkt-card__image{max-width:400px;margin-right:2rem}.pkt-card.pkt-card--horizontal .pkt-card__image-square{align-self:stretch}@media screen and (max-width: 36rem){.pkt-card.pkt-card--horizontal .pkt-card__image{margin-right:0;margin-bottom:2rem;max-height:400px}.pkt-card.pkt-card--horizontal .pkt-card__image-square{max-width:unset}}.pkt-card.pkt-card--vertical .pkt-card__image{margin-bottom:2rem;max-height:400px}.pkt-card.pkt-card--padding-none.pkt-card--vertical .pkt-card__image-square{aspect-ratio:19/10}@media screen and (max-width: 36rem){.pkt-card.pkt-card--padding-none.pkt-card--horizontal .pkt-card__image-square{aspect-ratio:19/10}}.pkt-card .pkt-card__wrapper .pkt-card__link::before{content:"";position:absolute;inset:0;z-index:1;box-shadow:0px 0px 0px 0px rgba(0,0,0,0);outline:2px solid var(--pkt-color-brand-warm-blue-1000);outline-offset:-2px;outline-color:rgba(0,0,0,0);transition:all .3s ease-in-out}.pkt-card .pkt-card__link-heading{transition:color .2s ease-in-out,text-decoration-color .2s ease-in-out}.pkt-card:hover.pkt-card--border-on-hover .pkt-card__link::before,.pkt-card:focus-visible.pkt-card--border-on-hover .pkt-card__link::before,.pkt-card:focus-within.pkt-card--border-on-hover .pkt-card__link::before{cursor:pointer;outline-color:var(--pkt-color-brand-warm-blue-1000)}.pkt-card:hover .pkt-card__link-heading,.pkt-card:focus-visible .pkt-card__link-heading,.pkt-card:focus-within .pkt-card__link-heading{color:var(--pkt-color-brand-warm-blue-1000);text-decoration-color:var(--pkt-color-brand-warm-blue-1000)}.pkt-card .pkt-card__link:focus{outline:none;box-shadow:none}.pkt-card .pkt-card__link-heading:focus-within{color:var(--pkt-color-brand-warm-blue-1000);text-decoration-color:var(--pkt-color-brand-warm-blue-1000)}.pkt-card .pkt-card__wrapper .pkt-card__link:focus-visible::before{box-shadow:0px 0px 0px 4px var(--pkt-color-brand-purple-1000);outline-color:var(--pkt-color-brand-warm-blue-1000)}.pkt-card.pkt-card--padding-none{outline:none;background-color:rgba(0,0,0,0)}.pkt-card.pkt-card--padding-none.pkt-card--horizontal.pkt-card--gray{background-color:var(--pkt-color-brand-neutrals-100)}.pkt-card.pkt-card--padding-none.pkt-card--horizontal.pkt-card--blue{background-color:var(--pkt-color-brand-blue-200)}.pkt-card.pkt-card--padding-none.pkt-card--horizontal.pkt-card--green{background-color:var(--pkt-color-brand-light-green-400)}.pkt-card.pkt-card--padding-none.pkt-card--horizontal.pkt-card--beige{background-color:var(--pkt-color-brand-light-beige-1000)}.pkt-card--outlined,.pkt-card--outlined-beige{background-color:var(--pkt-color-background-default);outline-offset:-4px}.pkt-card--outlined{outline:4px solid var(--pkt-color-grays-gray-100)}.pkt-card--outlined-beige{outline:4px solid var(--pkt-color-brand-light-beige-1000)}.pkt-card--gray{background-color:var(--pkt-color-brand-neutrals-100)}.pkt-card--blue{background-color:var(--pkt-color-brand-blue-200)}.pkt-card--green{background-color:var(--pkt-color-brand-light-green-400)}.pkt-card--beige{background-color:var(--pkt-color-brand-light-beige-1000)}
package/dist/css/pkt-components.css CHANGED
@@ -802,15 +802,15 @@ pkt-card {
802
802
  margin-top: 0.5rem;
803
803
  margin-bottom: 0;
804
804
  }
805
- .pkt-card.pkt-card--landscape {
805
+ .pkt-card.pkt-card--horizontal {
806
806
  flex-direction: row;
807
807
  }
808
808
  @media screen and (max-width: 36rem) {
809
- .pkt-card.pkt-card--landscape {
809
+ .pkt-card.pkt-card--horizontal {
810
810
  flex-direction: column;
811
811
  }
812
812
  }
813
- .pkt-card.pkt-card--portrait {
813
+ .pkt-card.pkt-card--vertical {
814
814
  flex-direction: column;
815
815
  min-width: 12.5rem;
816
816
  }
@@ -833,32 +833,32 @@ pkt-card {
833
833
  max-height: 400px;
834
834
  max-width: 400px;
835
835
  }
836
- .pkt-card.pkt-card--landscape .pkt-card__image {
836
+ .pkt-card.pkt-card--horizontal .pkt-card__image {
837
837
  max-width: 400px;
838
838
  margin-right: 2rem;
839
839
  }
840
- .pkt-card.pkt-card--landscape .pkt-card__image-square {
840
+ .pkt-card.pkt-card--horizontal .pkt-card__image-square {
841
841
  align-self: stretch;
842
842
  }
843
843
  @media screen and (max-width: 36rem) {
844
- .pkt-card.pkt-card--landscape .pkt-card__image {
844
+ .pkt-card.pkt-card--horizontal .pkt-card__image {
845
845
  margin-right: 0;
846
846
  margin-bottom: 2rem;
847
847
  max-height: 400px;
848
848
  }
849
- .pkt-card.pkt-card--landscape .pkt-card__image-square {
849
+ .pkt-card.pkt-card--horizontal .pkt-card__image-square {
850
850
  max-width: unset;
851
851
  }
852
852
  }
853
- .pkt-card.pkt-card--portrait .pkt-card__image {
853
+ .pkt-card.pkt-card--vertical .pkt-card__image {
854
854
  margin-bottom: 2rem;
855
855
  max-height: 400px;
856
856
  }
857
- .pkt-card.pkt-card--padding-none.pkt-card--portrait .pkt-card__image-square {
857
+ .pkt-card.pkt-card--padding-none.pkt-card--vertical .pkt-card__image-square {
858
858
  aspect-ratio: 19/10;
859
859
  }
860
860
  @media screen and (max-width: 36rem) {
861
- .pkt-card.pkt-card--padding-none.pkt-card--landscape .pkt-card__image-square {
861
+ .pkt-card.pkt-card--padding-none.pkt-card--horizontal .pkt-card__image-square {
862
862
  aspect-ratio: 19/10;
863
863
  }
864
864
  }
@@ -894,21 +894,22 @@ pkt-card {
894
894
  }
895
895
  .pkt-card .pkt-card__wrapper .pkt-card__link:focus-visible::before {
896
896
  box-shadow: 0px 0px 0px 4px var(--pkt-color-brand-purple-1000);
897
+ outline-color: var(--pkt-color-brand-warm-blue-1000);
897
898
  }
898
899
  .pkt-card.pkt-card--padding-none {
899
900
  outline: none;
900
901
  background-color: transparent;
901
902
  }
902
- .pkt-card.pkt-card--padding-none.pkt-card--landscape.pkt-card--gray {
903
+ .pkt-card.pkt-card--padding-none.pkt-card--horizontal.pkt-card--gray {
903
904
  background-color: var(--pkt-color-brand-neutrals-100);
904
905
  }
905
- .pkt-card.pkt-card--padding-none.pkt-card--landscape.pkt-card--blue {
906
+ .pkt-card.pkt-card--padding-none.pkt-card--horizontal.pkt-card--blue {
906
907
  background-color: var(--pkt-color-brand-blue-200);
907
908
  }
908
- .pkt-card.pkt-card--padding-none.pkt-card--landscape.pkt-card--green {
909
+ .pkt-card.pkt-card--padding-none.pkt-card--horizontal.pkt-card--green {
909
910
  background-color: var(--pkt-color-brand-light-green-400);
910
911
  }
911
- .pkt-card.pkt-card--padding-none.pkt-card--landscape.pkt-card--beige {
912
+ .pkt-card.pkt-card--padding-none.pkt-card--horizontal.pkt-card--beige {
912
913
  background-color: var(--pkt-color-brand-light-beige-1000);
913
914
  }
914
915
  .pkt-card--outlined, .pkt-card--outlined-beige {