@oslokommune/punkt-css 13.16.0 → 13.18.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 (25) hide show
  1. package/CHANGELOG.md +36 -0
  2. package/dist/css/components/textinput.css +1 -39
  3. package/dist/css/components/textinput.min.css +1 -1
  4. package/dist/css/elements/checkbox-radio.css +34 -35
  5. package/dist/css/elements/checkbox-radio.min.css +1 -1
  6. package/dist/css/elements/input.css +1 -39
  7. package/dist/css/elements/input.min.css +1 -1
  8. package/dist/css/elements/select.css +1 -41
  9. package/dist/css/elements/select.min.css +1 -1
  10. package/dist/css/pkt-base.css +177 -1
  11. package/dist/css/pkt-base.min.css +1 -1
  12. package/dist/css/pkt-components.css +1 -39
  13. package/dist/css/pkt-components.min.css +1 -1
  14. package/dist/css/pkt-docs.css +212 -77
  15. package/dist/css/pkt-docs.min.css +1 -1
  16. package/dist/css/pkt-elements.css +35 -76
  17. package/dist/css/pkt-elements.min.css +1 -1
  18. package/dist/css/pkt.css +212 -77
  19. package/dist/css/pkt.min.css +1 -1
  20. package/dist/scss/abstracts/variables/_colors.scss +21 -1
  21. package/dist/scss/abstracts/variables/_index.scss +1 -1
  22. package/dist/scss/base/_colors.scss +20 -0
  23. package/dist/scss/elements/_checkbox-radio.scss +38 -40
  24. package/dist/scss/elements/_input.scss +0 -39
  25. package/package.json +2 -2
package/dist/css/pkt-base.css CHANGED
@@ -139,6 +139,22 @@
139
139
  --pkt-color-text-action-active: #1f42aa;
140
140
  --pkt-color-text-action-hover: #1f42aa;
141
141
  --pkt-color-text-action-normal: #2a2859;
142
+ --pkt-color-input-background-normal: #ffffff;
143
+ --pkt-color-input-border-active: #1f42aa;
144
+ --pkt-color-input-border-disabled: #b3b3b3;
145
+ --pkt-color-input-border-error: #ff8274;
146
+ --pkt-color-input-border-hover: #1f42aa;
147
+ --pkt-color-input-border-normal: #2a2859;
148
+ --pkt-color-input-text-active: #1f42aa;
149
+ --pkt-color-input-text-disabled: #808080;
150
+ --pkt-color-input-text-hover: #1f42aa;
151
+ --pkt-color-input-text-normal: #2a2859;
152
+ --pkt-color-input-text-error: #ff8274;
153
+ --pkt-color-input-text-open: #ffffff;
154
+ --pkt-color-input-check-background: #ffffff;
155
+ --pkt-color-input-check-border: #2a2859;
156
+ --pkt-color-input-check-text-active: #1f42aa;
157
+ --pkt-color-input-check-text-hover: #1f42aa;
142
158
  --color-blue: #6fe9ff;
143
159
  --color-blue-light: #b3f5ff;
144
160
  --color-blue-dark: #2a2859;
@@ -947,6 +963,150 @@
947
963
  :root .pkt-color-border-text-action-normal {
948
964
  border-color: var(--pkt-color-text-action-normal) !important;
949
965
  }
966
+ :root .pkt-color-bg-input-background-normal {
967
+ background-color: var(--pkt-color-input-background-normal) !important;
968
+ }
969
+ :root .pkt-color-txt-input-background-normal {
970
+ color: var(--pkt-color-input-background-normal) !important;
971
+ }
972
+ :root .pkt-color-border-input-background-normal {
973
+ border-color: var(--pkt-color-input-background-normal) !important;
974
+ }
975
+ :root .pkt-color-bg-input-border-active {
976
+ background-color: var(--pkt-color-input-border-active) !important;
977
+ }
978
+ :root .pkt-color-txt-input-border-active {
979
+ color: var(--pkt-color-input-border-active) !important;
980
+ }
981
+ :root .pkt-color-border-input-border-active {
982
+ border-color: var(--pkt-color-input-border-active) !important;
983
+ }
984
+ :root .pkt-color-bg-input-border-disabled {
985
+ background-color: var(--pkt-color-input-border-disabled) !important;
986
+ }
987
+ :root .pkt-color-txt-input-border-disabled {
988
+ color: var(--pkt-color-input-border-disabled) !important;
989
+ }
990
+ :root .pkt-color-border-input-border-disabled {
991
+ border-color: var(--pkt-color-input-border-disabled) !important;
992
+ }
993
+ :root .pkt-color-bg-input-border-error {
994
+ background-color: var(--pkt-color-input-border-error) !important;
995
+ }
996
+ :root .pkt-color-txt-input-border-error {
997
+ color: var(--pkt-color-input-border-error) !important;
998
+ }
999
+ :root .pkt-color-border-input-border-error {
1000
+ border-color: var(--pkt-color-input-border-error) !important;
1001
+ }
1002
+ :root .pkt-color-bg-input-border-hover {
1003
+ background-color: var(--pkt-color-input-border-hover) !important;
1004
+ }
1005
+ :root .pkt-color-txt-input-border-hover {
1006
+ color: var(--pkt-color-input-border-hover) !important;
1007
+ }
1008
+ :root .pkt-color-border-input-border-hover {
1009
+ border-color: var(--pkt-color-input-border-hover) !important;
1010
+ }
1011
+ :root .pkt-color-bg-input-border-normal {
1012
+ background-color: var(--pkt-color-input-border-normal) !important;
1013
+ }
1014
+ :root .pkt-color-txt-input-border-normal {
1015
+ color: var(--pkt-color-input-border-normal) !important;
1016
+ }
1017
+ :root .pkt-color-border-input-border-normal {
1018
+ border-color: var(--pkt-color-input-border-normal) !important;
1019
+ }
1020
+ :root .pkt-color-bg-input-text-active {
1021
+ background-color: var(--pkt-color-input-text-active) !important;
1022
+ }
1023
+ :root .pkt-color-txt-input-text-active {
1024
+ color: var(--pkt-color-input-text-active) !important;
1025
+ }
1026
+ :root .pkt-color-border-input-text-active {
1027
+ border-color: var(--pkt-color-input-text-active) !important;
1028
+ }
1029
+ :root .pkt-color-bg-input-text-disabled {
1030
+ background-color: var(--pkt-color-input-text-disabled) !important;
1031
+ }
1032
+ :root .pkt-color-txt-input-text-disabled {
1033
+ color: var(--pkt-color-input-text-disabled) !important;
1034
+ }
1035
+ :root .pkt-color-border-input-text-disabled {
1036
+ border-color: var(--pkt-color-input-text-disabled) !important;
1037
+ }
1038
+ :root .pkt-color-bg-input-text-hover {
1039
+ background-color: var(--pkt-color-input-text-hover) !important;
1040
+ }
1041
+ :root .pkt-color-txt-input-text-hover {
1042
+ color: var(--pkt-color-input-text-hover) !important;
1043
+ }
1044
+ :root .pkt-color-border-input-text-hover {
1045
+ border-color: var(--pkt-color-input-text-hover) !important;
1046
+ }
1047
+ :root .pkt-color-bg-input-text-normal {
1048
+ background-color: var(--pkt-color-input-text-normal) !important;
1049
+ }
1050
+ :root .pkt-color-txt-input-text-normal {
1051
+ color: var(--pkt-color-input-text-normal) !important;
1052
+ }
1053
+ :root .pkt-color-border-input-text-normal {
1054
+ border-color: var(--pkt-color-input-text-normal) !important;
1055
+ }
1056
+ :root .pkt-color-bg-input-text-error {
1057
+ background-color: var(--pkt-color-input-text-error) !important;
1058
+ }
1059
+ :root .pkt-color-txt-input-text-error {
1060
+ color: var(--pkt-color-input-text-error) !important;
1061
+ }
1062
+ :root .pkt-color-border-input-text-error {
1063
+ border-color: var(--pkt-color-input-text-error) !important;
1064
+ }
1065
+ :root .pkt-color-bg-input-text-open {
1066
+ background-color: var(--pkt-color-input-text-open) !important;
1067
+ }
1068
+ :root .pkt-color-txt-input-text-open {
1069
+ color: var(--pkt-color-input-text-open) !important;
1070
+ }
1071
+ :root .pkt-color-border-input-text-open {
1072
+ border-color: var(--pkt-color-input-text-open) !important;
1073
+ }
1074
+ :root .pkt-color-bg-input-check-background {
1075
+ background-color: var(--pkt-color-input-check-background) !important;
1076
+ }
1077
+ :root .pkt-color-txt-input-check-background {
1078
+ color: var(--pkt-color-input-check-background) !important;
1079
+ }
1080
+ :root .pkt-color-border-input-check-background {
1081
+ border-color: var(--pkt-color-input-check-background) !important;
1082
+ }
1083
+ :root .pkt-color-bg-input-check-border {
1084
+ background-color: var(--pkt-color-input-check-border) !important;
1085
+ }
1086
+ :root .pkt-color-txt-input-check-border {
1087
+ color: var(--pkt-color-input-check-border) !important;
1088
+ }
1089
+ :root .pkt-color-border-input-check-border {
1090
+ border-color: var(--pkt-color-input-check-border) !important;
1091
+ }
1092
+ :root .pkt-color-bg-input-check-text-active {
1093
+ background-color: var(--pkt-color-input-check-text-active) !important;
1094
+ }
1095
+ :root .pkt-color-txt-input-check-text-active {
1096
+ color: var(--pkt-color-input-check-text-active) !important;
1097
+ }
1098
+ :root .pkt-color-border-input-check-text-active {
1099
+ border-color: var(--pkt-color-input-check-text-active) !important;
1100
+ }
1101
+ :root .pkt-color-bg-input-check-text-hover {
1102
+ background-color: var(--pkt-color-input-check-text-hover) !important;
1103
+ }
1104
+ :root .pkt-color-txt-input-check-text-hover {
1105
+ color: var(--pkt-color-input-check-text-hover) !important;
1106
+ }
1107
+ :root .pkt-color-border-input-check-text-hover {
1108
+ border-color: var(--pkt-color-input-check-text-hover) !important;
1109
+ }
950
1110
  :root .bg-color-blue {
951
1111
  background-color: #6fe9ff !important;
952
1112
  }
@@ -1299,6 +1459,22 @@
1299
1459
  --pkt-color-text-action-active: var(--pkt-color-brand-blue-500);
1300
1460
  --pkt-color-text-action-hover: var(--pkt-color-brand-blue-500);
1301
1461
  --pkt-color-text-action-normal: var(--pkt-color-brand-neutrals-white);
1462
+ --pkt-color-input-background-normal: var(--pkt-color-brand-neutrals-white);
1463
+ --pkt-color-input-border-active: var(--pkt-color-brand-blue-500);
1464
+ --pkt-color-input-border-disabled: var(--pkt-color-grays-gray-200);
1465
+ --pkt-color-input-border-error: var(--pkt-color-brand-red-1000);
1466
+ --pkt-color-input-border-hover: var(--pkt-color-brand-blue-500);
1467
+ --pkt-color-input-border-normal: var(--pkt-color-brand-neutrals-white);
1468
+ --pkt-color-input-text-active: var(--pkt-color-brand-warm-blue-1000);
1469
+ --pkt-color-input-text-disabled: var(--pkt-color-grays-gray-200);
1470
+ --pkt-color-input-text-hover: var(--pkt-color-brand-warm-blue-1000);
1471
+ --pkt-color-input-text-normal: var(--pkt-color-brand-dark-blue-1000);
1472
+ --pkt-color-input-text-error: var(--pkt-color-brand-red-1000);
1473
+ --pkt-color-input-text-open: var(--pkt-color-brand-dark-blue-1000);
1474
+ --pkt-color-input-check-background: var(--pkt-color-brand-dark-blue-1000);
1475
+ --pkt-color-input-check-border: var(--pkt-color-brand-neutrals-white);
1476
+ --pkt-color-input-check-text-active: var(--pkt-color-brand-blue-500);
1477
+ --pkt-color-input-check-text-hover: var(--pkt-color-brand-blue-500);
1302
1478
  }
1303
1479
 
1304
1480
  /*
@@ -13977,7 +14153,7 @@ a:active, a.pkt-link--active,
13977
14153
  .pkt-link--external::after {
13978
14154
  display: inline-block;
13979
14155
  content: " ";
13980
- --svg: url(https://punkt-cdn.oslo.kommune.no/13.16/icons/new-window-small.svg);
14156
+ --svg: url(https://punkt-cdn.oslo.kommune.no/13.18/icons/new-window-small.svg);
13981
14157
  background-image: var(--svg);
13982
14158
  background-repeat: no-repeat;
13983
14159
  background-size: 18px 18px;