@oslokommune/punkt-css 9.5.4 → 11.0.1
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.
- package/CHANGELOG.md +40 -0
- package/CONTRIBUTING.md +11 -7
- package/dist/css/components/textinput.css +8 -9
- package/dist/css/components/textinput.min.css +1 -1
- package/dist/css/pkt-base.css +6 -7
- package/dist/css/pkt-base.min.css +1 -1
- package/dist/css/pkt-components.css +7 -7
- package/dist/css/pkt-components.min.css +1 -1
- package/dist/css/pkt-elements.css +10 -10
- package/dist/css/pkt-elements.min.css +1 -1
- package/dist/css/pkt.css +7 -7
- package/dist/css/pkt.min.css +1 -1
- package/dist/scss/abstracts/variables/_index.scss +3 -0
- package/dist/scss/base/_typography.scss +1 -1
- package/dist/scss/elements/_checkbox-radio.scss +1 -1
- package/dist/scss/elements/_input.scss +1 -1
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,46 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
|
|
|
5
5
|
|
|
6
6
|
---
|
|
7
7
|
|
|
8
|
+
## [11.0.1](https://github.com/oslokommune/punkt/compare/11.0.0...11.0.1) (2024-01-03)
|
|
9
|
+
|
|
10
|
+
### ⚠ BREAKING CHANGES
|
|
11
|
+
Ingen
|
|
12
|
+
|
|
13
|
+
### Features
|
|
14
|
+
Ingen
|
|
15
|
+
|
|
16
|
+
### Bug Fixes
|
|
17
|
+
* Mulighet for å overstyre ikonstien i SCSS (#1387).
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
### Chores
|
|
21
|
+
Ingen
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
## [11.0.0](https://github.com/oslokommune/punkt/compare/10.0.0...11.0.0) (2023-12-20)
|
|
27
|
+
|
|
28
|
+
### ⚠ BREAKING CHANGES
|
|
29
|
+
Ingen
|
|
30
|
+
|
|
31
|
+
### Features
|
|
32
|
+
Ingen
|
|
33
|
+
|
|
34
|
+
### Bug Fixes
|
|
35
|
+
* Oppdater node- og vite-versjoner, samt litt feilretting (#1376).
|
|
36
|
+
* Tving publisering etter feilet bygg.
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
### Chores
|
|
40
|
+
* Legg til vue i allowedScopes (#1373). * Legg til vue i allowedScopes
|
|
41
|
+
* Prøver igjen å tvinge bygget (#1372).
|
|
42
|
+
* Tving publisering etter feilet bygg (#1370).
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
---
|
|
46
|
+
|
|
47
|
+
|
|
8
48
|
## [9.5.4](https://github.com/oslokommune/punkt/compare/9.5.3...9.5.4) (2023-12-07)
|
|
9
49
|
|
|
10
50
|
### ⚠ BREAKING CHANGES
|
package/CONTRIBUTING.md
CHANGED
|
@@ -7,7 +7,8 @@ er at vi høflig ber deg endre på noe. **Vi setter pris på alle hyggelige bidr
|
|
|
7
7
|
👋 Happy coding!
|
|
8
8
|
|
|
9
9
|
## 📝 Forutsetninger
|
|
10
|
-
|
|
10
|
+
|
|
11
|
+
- Node 18.19
|
|
11
12
|
- Kunnskap om [Sass (SCSS)](https://sass-lang.com/) og [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS).
|
|
12
13
|
- Forståelse av [BEM-navnekonvensjoner](http://getbem.com/) som designsystemet følger.
|
|
13
14
|
- Skal du jobbe med [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) er det nyttig å kunne litt om det.
|
|
@@ -22,6 +23,7 @@ git config core.hooksPath scripts/git-hooks
|
|
|
22
23
|
```
|
|
23
24
|
|
|
24
25
|
### Lerna
|
|
26
|
+
|
|
25
27
|
Punkt er et monorepo og bruker `lerna`. Det betyr at alle kommandoer kjører
|
|
26
28
|
fra repoets rot, og ikke i subrepoene.
|
|
27
29
|
|
|
@@ -37,6 +39,7 @@ utvikling i dette subrepoet:
|
|
|
37
39
|
```
|
|
38
40
|
|
|
39
41
|
## 🛠️ Gjør arbeidet
|
|
42
|
+
|
|
40
43
|
### Bli kjent med koden
|
|
41
44
|
|
|
42
45
|
```sh
|
|
@@ -64,7 +67,6 @@ utvikling i dette subrepoet:
|
|
|
64
67
|
└── README.md # kom i gang-informasjon
|
|
65
68
|
```
|
|
66
69
|
|
|
67
|
-
|
|
68
70
|
### SCSS
|
|
69
71
|
|
|
70
72
|
Skal du jobbe med CSS-rammeverket er dette stedet å starte.
|
|
@@ -76,18 +78,18 @@ scss
|
|
|
76
78
|
| ├── mixins/ # Kodeblokker som genererer Sass kode som igjen kompilerer til CSS-stiler.
|
|
77
79
|
| ├── placeholders/ # Lik class selectors som ikke genereres uten at de er tatt i bruk (extended).
|
|
78
80
|
| └── variables/ # Variabler eller design tokens som de kalles er fundamentet til rammeverket.
|
|
79
|
-
├── base/ # Grunnleggende moduler som farger, grid, fonter, tekststiler, mm.
|
|
81
|
+
├── base/ # Grunnleggende moduler som farger, grid, fonter, tekststiler, mm.
|
|
80
82
|
├── components/ # Både enkle og mer komplekse komponenter. Grunnlag for komponent-bibliotekene.
|
|
81
83
|
├── elements/ # HTML-elementer som er stylet, som knapper, lister og tabeller.
|
|
82
84
|
└── normalise/ # En ganske liten normalisering for å ha en felles baseline.
|
|
83
85
|
```
|
|
84
86
|
|
|
85
|
-
Abstracts består av konfigurasjonen og hjelpeverktøyene til CSS-rammeverket. Ingenting under denne
|
|
87
|
+
Abstracts består av konfigurasjonen og hjelpeverktøyene til CSS-rammeverket. Ingenting under denne
|
|
86
88
|
folderen skal generere en eneste linje CSS når den er kompilert på egen hånd.
|
|
87
89
|
|
|
88
|
-
Folderen `/variables` er en samling Sass-variabler skrevet på formen
|
|
89
|
-
[Sass maps](https://sass-lang.com/documentation/modules/map). Dette
|
|
90
|
-
gir en fin måte å kategorisere variablene og gir mulighet for nested
|
|
90
|
+
Folderen `/variables` er en samling Sass-variabler skrevet på formen
|
|
91
|
+
[Sass maps](https://sass-lang.com/documentation/modules/map). Dette
|
|
92
|
+
gir en fin måte å kategorisere variablene og gir mulighet for nested
|
|
91
93
|
maps.
|
|
92
94
|
|
|
93
95
|
Eksempel:
|
|
@@ -106,6 +108,7 @@ $breakpoints: (
|
|
|
106
108
|
```
|
|
107
109
|
|
|
108
110
|
## 🤝 Lag PR
|
|
111
|
+
|
|
109
112
|
Når du er klar for en PR skriv din GitHub-message som sier hva som er gjort, og evt issue nummer.
|
|
110
113
|
|
|
111
114
|
Vi bruker [Conventional Commits](https://www.conventionalcommits.org/) for å beskrive commits gjennom
|
|
@@ -120,6 +123,7 @@ docs: Endre dokumentasjon # Endring i dokumenta
|
|
|
120
123
|
```
|
|
121
124
|
|
|
122
125
|
## 🔢 Publisering og versjonering
|
|
126
|
+
|
|
123
127
|
Vi tar oss av publisering av pakken og versjonering.
|
|
124
128
|
|
|
125
129
|
Punkt bruker [Semantic Versioning 2.0.0](https://semver.org/spec/v2.0.0.html) for versjonering av pakkene.
|
|
@@ -1,3 +1,9 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Textinput component
|
|
3
|
+
*
|
|
4
|
+
* Denne blir stilsatt av .pkt-input
|
|
5
|
+
* Ikke bruk klassen .pkt-textinput
|
|
6
|
+
*/
|
|
1
7
|
/* Common styles for all inputs */
|
|
2
8
|
.pkt-input, .pkt-textinput__input,
|
|
3
9
|
.pkt-input-prefix,
|
|
@@ -68,7 +74,7 @@
|
|
|
68
74
|
padding-right: 3rem;
|
|
69
75
|
}
|
|
70
76
|
.pkt-input:is(select):not([multiple]), .pkt-textinput__input:is(select):not([multiple]) {
|
|
71
|
-
--svg: url(https://punkt-cdn.oslo.kommune.no/
|
|
77
|
+
--svg: url(https://punkt-cdn.oslo.kommune.no/11.0/icons/chevron-thin-down.svg);
|
|
72
78
|
background-image: var(--svg);
|
|
73
79
|
background-repeat: no-repeat;
|
|
74
80
|
background-position: right 0.7rem top 50%;
|
|
@@ -213,11 +219,4 @@
|
|
|
213
219
|
letter-spacing: -0.2px;
|
|
214
220
|
line-height: 1.375rem;
|
|
215
221
|
color: var(--pkt-color-input-text-error);
|
|
216
|
-
}
|
|
217
|
-
|
|
218
|
-
/*
|
|
219
|
-
* Textinput component
|
|
220
|
-
*
|
|
221
|
-
* Denne blir stilsatt av .pkt-input
|
|
222
|
-
* Ikke bruk klassen .pkt-textinput
|
|
223
|
-
*/
|
|
222
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.pkt-input,.pkt-textinput__input,.pkt-input-prefix,.pkt-input-suffix,.pkt-input-icon,.pkt-input__container{--pkt-color-input-background-normal: var(--pkt-color-brand-neutrals-white);--pkt-color-input-border-active: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-border-disabled: var(--pkt-color-grays-gray-300);--pkt-color-input-border-error: var(--pkt-color-brand-red-1000);--pkt-color-input-border-hover: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-border-normal: var(--pkt-color-brand-dark-blue-1000);--pkt-color-input-text-active: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-text-disabled: var(--pkt-color-grays-gray-500);--pkt-color-input-text-hover: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-text-normal: var(--pkt-color-brand-dark-blue-1000);--pkt-color-input-text-error: var(--pkt-color-brand-red-1000);--pkt-color-input-text-open: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-input,[data-mode=dark] .pkt-textinput__input,[data-mode=dark] .pkt-input-prefix,[data-mode=dark] .pkt-input-suffix,[data-mode=dark] .pkt-input-icon,[data-mode=dark] .pkt-input__container{--pkt-color-input-background-normal: var(--pkt-color-brand-neutrals-white);--pkt-color-input-border-active: var(--pkt-color-brand-blue-500);--pkt-color-input-border-disabled: var(--pkt-color-grays-gray-200);--pkt-color-input-border-error: var(--pkt-color-brand-red-1000);--pkt-color-input-border-hover: var(--pkt-color-brand-blue-500);--pkt-color-input-border-normal: var(--pkt-color-brand-neutrals-white);--pkt-color-input-text-active: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-text-disabled: var(--pkt-color-grays-gray-200);--pkt-color-input-text-hover: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-text-normal: var(--pkt-color-brand-dark-blue-1000);--pkt-color-input-text-error: var(--pkt-color-brand-red-1000);--pkt-color-input-text-open: var(--pkt-color-brand-dark-blue-1000)}.pkt-input,.pkt-textinput__input{font-size:1.125rem;font-weight:300;letter-spacing:-0.2px;line-height:1.75rem;display:flex;align-items:center;appearance:none;background-color:var(--pkt-color-input-background-normal);border:2px solid var(--pkt-color-input-border-normal);border-radius:0;color:var(--pkt-color-input-text-normal);margin:0;padding:.5rem 1rem}.pkt-input:not(textarea[cols]):not(input[size]):not(.pkt-input--fullwidth),.pkt-textinput__input:not(textarea[cols]):not(input[size]):not(.pkt-input--fullwidth),.pkt-input__container:not(:is(:has(textarea[cols]))):not(:is(:has(input[size]))):not(:is(:has(.pkt-input--fullwidth))){width:min(100%,31rem)}.pkt-input--fullwidth{width:100%}.pkt-input:is(textarea),.pkt-textinput__input:is(textarea){min-height:8rem}.pkt-input:is(select),.pkt-textinput__input:is(select){appearance:none;-moz-appearance:none;-webkit-appearance:none;padding-right:3rem}.pkt-input:is(select):not([multiple]),.pkt-textinput__input:is(select):not([multiple]){--svg: url(https://punkt-cdn.oslo.kommune.no/
|
|
1
|
+
.pkt-input,.pkt-textinput__input,.pkt-input-prefix,.pkt-input-suffix,.pkt-input-icon,.pkt-input__container{--pkt-color-input-background-normal: var(--pkt-color-brand-neutrals-white);--pkt-color-input-border-active: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-border-disabled: var(--pkt-color-grays-gray-300);--pkt-color-input-border-error: var(--pkt-color-brand-red-1000);--pkt-color-input-border-hover: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-border-normal: var(--pkt-color-brand-dark-blue-1000);--pkt-color-input-text-active: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-text-disabled: var(--pkt-color-grays-gray-500);--pkt-color-input-text-hover: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-text-normal: var(--pkt-color-brand-dark-blue-1000);--pkt-color-input-text-error: var(--pkt-color-brand-red-1000);--pkt-color-input-text-open: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-input,[data-mode=dark] .pkt-textinput__input,[data-mode=dark] .pkt-input-prefix,[data-mode=dark] .pkt-input-suffix,[data-mode=dark] .pkt-input-icon,[data-mode=dark] .pkt-input__container{--pkt-color-input-background-normal: var(--pkt-color-brand-neutrals-white);--pkt-color-input-border-active: var(--pkt-color-brand-blue-500);--pkt-color-input-border-disabled: var(--pkt-color-grays-gray-200);--pkt-color-input-border-error: var(--pkt-color-brand-red-1000);--pkt-color-input-border-hover: var(--pkt-color-brand-blue-500);--pkt-color-input-border-normal: var(--pkt-color-brand-neutrals-white);--pkt-color-input-text-active: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-text-disabled: var(--pkt-color-grays-gray-200);--pkt-color-input-text-hover: var(--pkt-color-brand-warm-blue-1000);--pkt-color-input-text-normal: var(--pkt-color-brand-dark-blue-1000);--pkt-color-input-text-error: var(--pkt-color-brand-red-1000);--pkt-color-input-text-open: var(--pkt-color-brand-dark-blue-1000)}.pkt-input,.pkt-textinput__input{font-size:1.125rem;font-weight:300;letter-spacing:-0.2px;line-height:1.75rem;display:flex;align-items:center;appearance:none;background-color:var(--pkt-color-input-background-normal);border:2px solid var(--pkt-color-input-border-normal);border-radius:0;color:var(--pkt-color-input-text-normal);margin:0;padding:.5rem 1rem}.pkt-input:not(textarea[cols]):not(input[size]):not(.pkt-input--fullwidth),.pkt-textinput__input:not(textarea[cols]):not(input[size]):not(.pkt-input--fullwidth),.pkt-input__container:not(:is(:has(textarea[cols]))):not(:is(:has(input[size]))):not(:is(:has(.pkt-input--fullwidth))){width:min(100%,31rem)}.pkt-input--fullwidth{width:100%}.pkt-input:is(textarea),.pkt-textinput__input:is(textarea){min-height:8rem}.pkt-input:is(select),.pkt-textinput__input:is(select){appearance:none;-moz-appearance:none;-webkit-appearance:none;padding-right:3rem}.pkt-input:is(select):not([multiple]),.pkt-textinput__input:is(select):not([multiple]){--svg: url(https://punkt-cdn.oslo.kommune.no/11.0/icons/chevron-thin-down.svg);background-image:var(--svg);background-repeat:no-repeat;background-position:right .7rem top 50%;background-size:1.5rem auto,100%}.pkt-input:is(select) option,.pkt-textinput__input:is(select) option{background-color:var(--pkt-color-input-background-normal);color:var(--pkt-color-input-text-normal);font-weight:normal}.pkt-input::placeholder,.pkt-textinput__input::placeholder{color:var(--pkt-color-text-placeholder);opacity:1}.pkt-input:hover,.pkt-textinput__input:hover,.pkt-input.pkt-input--hover,.pkt-input--hover.pkt-textinput__input{border-color:var(--pkt-color-input-border-hover)}.pkt-input:focus-visible,.pkt-textinput__input:focus-visible,.pkt-input.pkt-input__textinput--focus,.pkt-input__textinput--focus.pkt-textinput__input{box-shadow:0 0 0 2px var(--pkt-color-input-border-active);border-color:var(--pkt-color-input-border-active)}.pkt-input:focus,.pkt-textinput__input:focus{outline:none;box-shadow:0 0 0 2px var(--pkt-color-input-border-active);border-color:var(--pkt-color-input-border-active)}.pkt-input:disabled,.pkt-textinput__input:disabled,.pkt-input:disabled::placeholder,.pkt-textinput__input:disabled::placeholder,.pkt-input[readonly],[readonly].pkt-textinput__input{opacity:1;background-color:var(--pkt-color-surface-default-gray);border-color:var(--pkt-color-input-border-disabled);cursor:inherit}.pkt-input:disabled:active,.pkt-textinput__input:disabled:active{border:2px solid var(--pkt-color-input-border-disabled)}.pkt-input-prefix,.pkt-input-suffix,.pkt-input-icon{font-size:1.125rem;font-weight:300;letter-spacing:-0.2px;line-height:1.75rem;display:flex;align-items:center;width:auto;height:3rem;border:2px solid var(--pkt-color-input-border-normal);flex-shrink:0;color:var(--pkt-color-brand-dark-blue-1000);background-color:var(--pkt-color-input-background-normal)}.pkt-input-prefix{padding:.5rem 0rem .5rem 1rem}.pkt-input-prefix::after{content:"";width:1px;margin-left:.5rem;height:100%;background-color:var(--pkt-color-brand-dark-blue-1000)}.pkt-input-suffix{padding:.5rem 1rem .5rem 0rem}.pkt-input-suffix svg{width:1.5rem;height:1.5rem;margin-left:.5rem}.pkt-input-suffix::before{content:"";width:1px;margin-right:.5rem;height:1.5rem;background-color:var(--pkt-color-brand-dark-blue-1000)}.pkt-input-icon{padding:.5rem 1rem;align-self:stretch}.pkt-input-icon svg{width:1.5rem;height:1.5rem;margin-left:.5rem}.pkt-input--counter-error,.pkt-input--counter-error:focus{border-color:var(--pkt-color-input-border-error);background-color:var(--pkt-color-surface-default-faded-red)}.pkt-input--counter-error:focus{box-shadow:0 0 0 2px var(--pkt-color-input-border-error)}.pkt-input__container{display:flex;align-items:center;align-self:stretch}.pkt-input__container:is(:has(input[size])),.pkt-input__container:is(:has(textarea[cols])){align-self:flex-start}.pkt-input__container :first-child:not(:only-child){border-right:none}.pkt-input__container :last-child:not(:only-child){border-left:none}.pkt-input__container :not(:first-child):not(:last-child){border-left:none;border-right:none}.pkt-input__container p{margin:0}.pkt-input__container input:focus{outline:none;box-shadow:none}.pkt-input__container:hover .pkt-input,.pkt-input__container:hover .pkt-textinput__input,.pkt-input__container:hover .pkt-input-prefix,.pkt-input__container:hover .pkt-input-suffix,.pkt-input__container:hover .pkt-input-icon{border-color:var(--pkt-color-input-border-active)}.pkt-input__container:hover .pkt-input:disabled,.pkt-input__container:hover .pkt-textinput__input:disabled,.pkt-input__container:hover .pkt-input-prefix:disabled,.pkt-input__container:hover .pkt-input-suffix:disabled,.pkt-input__container:hover .pkt-input-icon:disabled{border-color:var(--pkt-color-input-border-disabled)}.pkt-input__container:focus-within{outline:2px solid var(--pkt-color-input-border-active)}.pkt-input__container:focus-within .pkt-input,.pkt-input__container:focus-within .pkt-textinput__input,.pkt-input__container:focus-within .pkt-input-prefix,.pkt-input__container:focus-within .pkt-input-suffix,.pkt-input__container:focus-within .pkt-input-icon{border-color:var(--pkt-color-input-border-active)}.pkt-input__counter{font-size:.875rem;font-weight:300;letter-spacing:-0.2px;line-height:1.375rem;width:min(100%,31rem);text-align:right}.pkt-input__counter--error{font-size:.875rem;font-weight:500;letter-spacing:-0.2px;line-height:1.375rem;color:var(--pkt-color-input-text-error)}
|
package/dist/css/pkt-base.css
CHANGED
|
@@ -13316,7 +13316,7 @@ a:active, a.pkt-link--active,
|
|
|
13316
13316
|
}
|
|
13317
13317
|
.pkt-link--external::after {
|
|
13318
13318
|
content: " ";
|
|
13319
|
-
--svg: url(https://punkt-cdn.oslo.kommune.no/
|
|
13319
|
+
--svg: url(https://punkt-cdn.oslo.kommune.no/11.0/icons/new-window-small.svg);
|
|
13320
13320
|
background-image: var(--svg);
|
|
13321
13321
|
background-repeat: no-repeat;
|
|
13322
13322
|
background-size: 18px 18px;
|
|
@@ -13853,6 +13853,10 @@ button.pkt-link {
|
|
|
13853
13853
|
}
|
|
13854
13854
|
}
|
|
13855
13855
|
|
|
13856
|
+
/*
|
|
13857
|
+
* Accessibility
|
|
13858
|
+
*
|
|
13859
|
+
*/
|
|
13856
13860
|
/*
|
|
13857
13861
|
* Accessibility
|
|
13858
13862
|
* https://kittygiraudel.com/2016/10/13/css-hide-and-seek/#undesirable-overflows-18012019
|
|
@@ -13869,9 +13873,4 @@ button.pkt-link {
|
|
|
13869
13873
|
position: absolute !important;
|
|
13870
13874
|
width: 1px !important;
|
|
13871
13875
|
white-space: nowrap !important;
|
|
13872
|
-
}
|
|
13873
|
-
|
|
13874
|
-
/*
|
|
13875
|
-
* Accessibility
|
|
13876
|
-
*
|
|
13877
|
-
*/
|
|
13876
|
+
}
|