@oslokommune/punkt-css 12.14.3 → 12.17.1

package/dist/css/elements/input.css

@@ -0,0 +1,269 @@
+/* Common styles for all inputs */
+.pkt-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-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 {
+  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: 0.5rem 1rem;
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+.pkt-input:not(.pkt-input-compact) {
+  min-height: 3rem;
+}
+.pkt-input-compact.pkt-input {
+  border: 0;
+  border-bottom: 1px solid var(--pkt-color-input-border-normal);
+  padding: 0 0 0.1rem 0;
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+.pkt-input-compact.pkt-input:is(select):not([multiple]) {
+  background-position: right 0 top 50%;
+  padding-right: 2rem;
+}
+.pkt-input:not(textarea[cols]):not(input[size]):not(.pkt-input--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)), .pkt-input__container:not(:is(:has(.pkt-datepicker__input:not(.pkt-datepicker--multiple)))):not(:is(:has(textarea[cols]))):not(:is(:has(input[size]))):not(:is(:has(.pkt-input--fullwidth))) {
+  width: min(31rem, 100%);
+}
+.pkt-input__container:is(:has(.pkt-datepicker__input:not(.pkt-datepicker--multiple))):not(:is(:has(.pkt-input--fullwidth))) {
+  width: fit-content;
+}
+.pkt-input--fullwidth, .pkt-input--fullwidth + .pkt-input__counter {
+  width: 100%;
+}
+.pkt-input:is(textarea) {
+  min-height: 8rem;
+}
+.pkt-input:is(select) {
+  appearance: none;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  padding-right: 3rem;
+}
+.pkt-input:is(select):not([multiple]) {
+  --svg: url(https://punkt-cdn.oslo.kommune.no/12.17/icons/chevron-thin-down.svg);
+  background-image: var(--svg);
+  background-repeat: no-repeat;
+  background-position: right 0.7rem top 50%;
+  background-size: 1.5rem auto, 100%;
+}
+.pkt-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 {
+  color: var(--pkt-color-text-placeholder);
+  opacity: 1;
+}
+.pkt-input:hover, .pkt-input.pkt-input--hover {
+  border-color: var(--pkt-color-input-border-hover);
+}
+.pkt-input:focus-visible, .pkt-input.pkt-input__textinput--focus {
+  box-shadow: 0 0 0 2px var(--pkt-color-input-border-active);
+  border-color: var(--pkt-color-input-border-active);
+}
+.pkt-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-input:disabled::placeholder, .pkt-input[readonly] {
+  opacity: 1;
+  background-color: var(--pkt-color-surface-default-gray);
+  border-color: var(--pkt-color-input-border-disabled);
+  cursor: inherit;
+}
+.pkt-input:disabled:active {
+  border: 2px solid var(--pkt-color-input-border-disabled);
+}
+.pkt-input-prefix, .pkt-input-suffix, .pkt-input-icon, .pkt-input-separator {
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+.pkt-input-prefix, .pkt-input-suffix, .pkt-input-icon, .pkt-input-separator {
+  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: 0.5rem 0rem 0.5rem 1rem;
+}
+.pkt-input-prefix::after {
+  content: "";
+  width: 1px;
+  margin-left: 0.5rem;
+  height: 100%;
+  background-color: var(--pkt-color-brand-dark-blue-1000);
+}
+.pkt-input-suffix {
+  padding: 0.5rem 1rem 0.5rem 0rem;
+}
+.pkt-input-suffix svg {
+  width: 1.5rem;
+  height: 1.5rem;
+  margin-left: 0.5rem;
+}
+.pkt-input-suffix::before {
+  content: "";
+  width: 1px;
+  margin-right: 0.5rem;
+  height: 1.5rem;
+  background-color: var(--pkt-color-brand-dark-blue-1000);
+}
+.pkt-input-icon {
+  padding: 0.5rem 1rem;
+  align-self: stretch;
+}
+.pkt-input-icon svg {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.pkt-input-icon:not(button) svg {
+  margin-left: 0.5rem;
+}
+.pkt-input-separator {
+  padding: 0.5rem 0;
+}
+.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-width: 0;
+}
+.pkt-input__container :last-child:not(:only-child) {
+  border-left-width: 0;
+}
+.pkt-input__container :not(:first-child):not(:last-child) {
+  border-left-width: 0;
+  border-right-width: 0;
+}
+.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-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-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-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 {
+  letter-spacing: -0.2px;
+  font-weight: 300;
+  font-size: 0.875rem;
+  line-height: 1.375rem;
+}
+.pkt-input__counter {
+  width: min(100%, 31rem);
+  text-align: right;
+}
+.pkt-input__counter--error {
+  letter-spacing: -0.2px;
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.375rem;
+}
+.pkt-input__counter--error {
+  color: var(--pkt-color-input-text-error);
+}
+.pkt-input__range-inputs {
+  min-width: 17rem;
+  container: range/inline-size;
+}
+
+@container range (width < 30rem) {
+  .pkt-input__container {
+    border: 2px solid var(--pkt-color-input-border-normal);
+    display: grid;
+    grid-template-rows: auto auto;
+    grid-template-columns: min-content auto 4rem;
+    gap: 0;
+  }
+  .pkt-input__container > :nth-child(2) {
+    grid-column-start: span 2;
+  }
+  .pkt-input__container .pkt-input-prefix,
+  .pkt-input__container .pkt-input-suffix,
+  .pkt-input__container .pkt-input-icon,
+  .pkt-input__container .pkt-input {
+    border: 0;
+  }
+}

package/dist/css/elements/input.min.css

@@ -0,0 +1 @@
+.pkt-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-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{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;letter-spacing:-0.2px;font-weight:300;font-size:1.125rem;line-height:1.75rem}.pkt-input:not(.pkt-input-compact){min-height:3rem}.pkt-input-compact.pkt-input{border:0;border-bottom:1px solid var(--pkt-color-input-border-normal);padding:0 0 .1rem 0;letter-spacing:-0.2px;font-weight:300;font-size:1rem;line-height:1.5rem}.pkt-input-compact.pkt-input:is(select):not([multiple]){background-position:right 0 top 50%;padding-right:2rem}.pkt-input:not(textarea[cols]):not(input[size]):not(.pkt-input--fullwidth):not(.pkt-datepicker__input:not(.pkt-datepicker--multiple)),.pkt-input__container:not(:is(:has(.pkt-datepicker__input:not(.pkt-datepicker--multiple)))):not(:is(:has(textarea[cols]))):not(:is(:has(input[size]))):not(:is(:has(.pkt-input--fullwidth))){width:min(31rem,100%)}.pkt-input__container:is(:has(.pkt-datepicker__input:not(.pkt-datepicker--multiple))):not(:is(:has(.pkt-input--fullwidth))){width:fit-content}.pkt-input--fullwidth,.pkt-input--fullwidth+.pkt-input__counter{width:100%}.pkt-input:is(textarea){min-height:8rem}.pkt-input:is(select){appearance:none;-moz-appearance:none;-webkit-appearance:none;padding-right:3rem}.pkt-input:is(select):not([multiple]){--svg: url(https://punkt-cdn.oslo.kommune.no/12.17/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{background-color:var(--pkt-color-input-background-normal);color:var(--pkt-color-input-text-normal);font-weight:normal}.pkt-input::placeholder{color:var(--pkt-color-text-placeholder);opacity:1}.pkt-input:hover,.pkt-input.pkt-input--hover{border-color:var(--pkt-color-input-border-hover)}.pkt-input:focus-visible,.pkt-input.pkt-input__textinput--focus{box-shadow:0 0 0 2px var(--pkt-color-input-border-active);border-color:var(--pkt-color-input-border-active)}.pkt-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-input:disabled::placeholder,.pkt-input[readonly]{opacity:1;background-color:var(--pkt-color-surface-default-gray);border-color:var(--pkt-color-input-border-disabled);cursor:inherit}.pkt-input:disabled:active{border:2px solid var(--pkt-color-input-border-disabled)}.pkt-input-prefix,.pkt-input-suffix,.pkt-input-icon,.pkt-input-separator{letter-spacing:-0.2px;font-weight:300;font-size:1.125rem;line-height:1.75rem}.pkt-input-prefix,.pkt-input-suffix,.pkt-input-icon,.pkt-input-separator{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}.pkt-input-icon:not(button) svg{margin-left:.5rem}.pkt-input-separator{padding:.5rem 0}.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-width:0}.pkt-input__container :last-child:not(:only-child){border-left-width:0}.pkt-input__container :not(:first-child):not(:last-child){border-left-width:0;border-right-width:0}.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-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-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-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{letter-spacing:-0.2px;font-weight:300;font-size:.875rem;line-height:1.375rem}.pkt-input__counter{width:min(100%,31rem);text-align:right}.pkt-input__counter--error{letter-spacing:-0.2px;font-weight:500;font-size:.875rem;line-height:1.375rem}.pkt-input__counter--error{color:var(--pkt-color-input-text-error)}.pkt-input__range-inputs{min-width:17rem;container:range/inline-size}@container range (width < 30rem){.pkt-input__container{border:2px solid var(--pkt-color-input-border-normal);display:grid;grid-template-rows:auto auto;grid-template-columns:min-content auto 4rem;gap:0}.pkt-input__container>:nth-child(2){grid-column-start:span 2}.pkt-input__container .pkt-input-prefix,.pkt-input__container .pkt-input-suffix,.pkt-input__container .pkt-input-icon,.pkt-input__container .pkt-input{border:0}}

package/dist/css/elements/list.css

@@ -0,0 +1,110 @@
+/* 
+ * List elements
+ */
+.pkt-list {
+  display: grid;
+  grid-template-columns: auto;
+  grid-template-rows: auto;
+  list-style: none;
+  padding: 0;
+  position: relative;
+  row-gap: 1.5rem;
+}
+@media screen and (min-width: 48rem) {
+  .pkt-list.two-cols-tablet-up {
+    column-gap: 1.5rem;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: auto;
+  }
+}
+@media screen and (min-width: 80rem) {
+  .pkt-list.three-cols-laptop-up {
+    column-gap: 1.5rem;
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+}
+.pkt-list li > a {
+  display: grid;
+  grid-template-columns: 2rem auto;
+  column-gap: 1rem;
+}
+
+.pkt-list-horizontal {
+  display: flex;
+  list-style: none;
+  padding: 0;
+}
+.pkt-list-horizontal li {
+  padding-right: 1rem;
+}
+.pkt-list-horizontal li + li {
+  padding-left: 1rem;
+}
+.pkt-list-horizontal li:last-child {
+  padding-right: 0;
+}
+.pkt-list-horizontal.bordered li + li {
+  border-left: 1px solid var(--pkt-color-grays-gray-600);
+}
+
+.pkt-dl,
+.pkt-dl--narrow {
+  display: flex;
+  flex-direction: column;
+}
+@supports (display: grid) {
+  .pkt-dl,
+  .pkt-dl--narrow {
+    display: grid;
+    flex-direction: column;
+    grid-template-columns: 1fr;
+    margin: 0.5rem 0;
+  }
+}
+
+@media screen and (min-width: 48rem) {
+  .pkt-dl {
+    grid-template-columns: minmax(9rem, auto) 1fr;
+    border-bottom: 0;
+  }
+}
+
+.pkt-dt {
+  padding: 0.5em 0 0;
+  font-size: 0.875rem;
+  border-bottom: none;
+}
+@media screen and (min-width: 48rem) {
+  .pkt-dt {
+    font-size: inherit;
+  }
+}
+
+.pkt-dl--narrow > .pkt-dt {
+  padding: 0.5em 0 0;
+  font-size: 0.875rem;
+  border-bottom: none;
+}
+
+.pkt-dd {
+  padding: 0 0 0.5em;
+  font-weight: 500;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+}
+@media screen and (min-width: 48rem) {
+  .pkt-dd {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+  }
+  @supports (display: grid) {
+    .pkt-dd {
+      padding: 0.25em 0 0.25em 1.25em;
+      border-bottom: 0;
+    }
+  }
+}
+
+.pkt-dl--narrow > .pkt-dd {
+  padding: 0 0 0.5em;
+  font-weight: 500;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+}

package/dist/css/elements/list.min.css

@@ -0,0 +1 @@
+.pkt-list{display:grid;grid-template-columns:auto;grid-template-rows:auto;list-style:none;padding:0;position:relative;row-gap:1.5rem}@media screen and (min-width: 48rem){.pkt-list.two-cols-tablet-up{column-gap:1.5rem;grid-template-columns:1fr 1fr;grid-template-rows:auto}}@media screen and (min-width: 80rem){.pkt-list.three-cols-laptop-up{column-gap:1.5rem;grid-template-columns:1fr 1fr 1fr}}.pkt-list li>a{display:grid;grid-template-columns:2rem auto;column-gap:1rem}.pkt-list-horizontal{display:flex;list-style:none;padding:0}.pkt-list-horizontal li{padding-right:1rem}.pkt-list-horizontal li+li{padding-left:1rem}.pkt-list-horizontal li:last-child{padding-right:0}.pkt-list-horizontal.bordered li+li{border-left:1px solid var(--pkt-color-grays-gray-600)}.pkt-dl,.pkt-dl--narrow{display:flex;flex-direction:column}@supports(display: grid){.pkt-dl,.pkt-dl--narrow{display:grid;flex-direction:column;grid-template-columns:1fr;margin:.5rem 0}}@media screen and (min-width: 48rem){.pkt-dl{grid-template-columns:minmax(9rem, auto) 1fr;border-bottom:0}}.pkt-dt{padding:.5em 0 0;font-size:.875rem;border-bottom:none}@media screen and (min-width: 48rem){.pkt-dt{font-size:inherit}}.pkt-dl--narrow>.pkt-dt{padding:.5em 0 0;font-size:.875rem;border-bottom:none}.pkt-dd{padding:0 0 .5em;font-weight:500;border-bottom:1px solid rgba(0,0,0,.15)}@media screen and (min-width: 48rem){.pkt-dd{border-bottom:1px solid rgba(0,0,0,.15)}@supports(display: grid){.pkt-dd{padding:.25em 0 .25em 1.25em;border-bottom:0}}}.pkt-dl--narrow>.pkt-dd{padding:0 0 .5em;font-weight:500;border-bottom:1px solid rgba(0,0,0,.15)}

package/dist/css/elements/section.css

@@ -0,0 +1,216 @@
+/*
+ * Section elements
+ *
+ */
+.pkt-section {
+  margin: 1rem 0;
+}
+
+.pkt-section--dark {
+  color: white;
+  margin: 1rem 0;
+  padding: 0.75rem;
+  background-color: #2a2859;
+  /*
+  @if luminance($backgroundColor) < 0.4 {
+    color: white;
+
+    a:not([class^='ok-btn']) {
+      color: white;
+      text-decoration: underline;
+    }
+  }
+  */
+}
+@media screen and (min-width: 35.938rem) {
+  .pkt-section--dark {
+    padding: 1rem;
+  }
+}
+@media screen and (min-width: 48rem) {
+  .pkt-section--dark {
+    padding: 1.5rem;
+  }
+}
+.pkt-section--dark a.pkt-btn--ter {
+  color: white;
+}
+
+.pkt-section--danger {
+  color: black;
+  margin: 1rem 0;
+  padding: 0.75rem;
+  background-color: #ff8274;
+  /*
+  @if luminance($backgroundColor) < 0.4 {
+    color: white;
+
+    a:not([class^='ok-btn']) {
+      color: white;
+      text-decoration: underline;
+    }
+  }
+  */
+}
+@media screen and (min-width: 35.938rem) {
+  .pkt-section--danger {
+    padding: 1rem;
+  }
+}
+@media screen and (min-width: 48rem) {
+  .pkt-section--danger {
+    padding: 1.5rem;
+  }
+}
+.pkt-section--danger a.pkt-btn--ter {
+  color: black;
+}
+
+.pkt-section--gray,
+.pkt-section--grey {
+  margin: 1rem 0;
+  padding: 0.75rem;
+  background-color: #f2f2f2;
+  /*
+  @if luminance($backgroundColor) < 0.4 {
+    color: white;
+
+    a:not([class^='ok-btn']) {
+      color: white;
+      text-decoration: underline;
+    }
+  }
+  */
+}
+@media screen and (min-width: 35.938rem) {
+  .pkt-section--gray,
+  .pkt-section--grey {
+    padding: 1rem;
+  }
+}
+@media screen and (min-width: 48rem) {
+  .pkt-section--gray,
+  .pkt-section--grey {
+    padding: 1.5rem;
+  }
+}
+
+.pkt-section--success {
+  color: black;
+  margin: 1rem 0;
+  padding: 0.75rem;
+  background-color: #43f8b6;
+  /*
+  @if luminance($backgroundColor) < 0.4 {
+    color: white;
+
+    a:not([class^='ok-btn']) {
+      color: white;
+      text-decoration: underline;
+    }
+  }
+  */
+}
+@media screen and (min-width: 35.938rem) {
+  .pkt-section--success {
+    padding: 1rem;
+  }
+}
+@media screen and (min-width: 48rem) {
+  .pkt-section--success {
+    padding: 1.5rem;
+  }
+}
+.pkt-section--success a.pkt-btn--ter {
+  color: black;
+}
+
+.pkt-section--warning {
+  margin: 1rem 0;
+  padding: 0.75rem;
+  background-color: #f9c66b;
+  /*
+  @if luminance($backgroundColor) < 0.4 {
+    color: white;
+
+    a:not([class^='ok-btn']) {
+      color: white;
+      text-decoration: underline;
+    }
+  }
+  */
+}
+@media screen and (min-width: 35.938rem) {
+  .pkt-section--warning {
+    padding: 1rem;
+  }
+}
+@media screen and (min-width: 48rem) {
+  .pkt-section--warning {
+    padding: 1.5rem;
+  }
+}
+
+.pkt-section--info {
+  margin: 1rem 0;
+  padding: 0.75rem;
+  background-color: #b3f5ff;
+  /*
+  @if luminance($backgroundColor) < 0.4 {
+    color: white;
+
+    a:not([class^='ok-btn']) {
+      color: white;
+      text-decoration: underline;
+    }
+  }
+  */
+}
+@media screen and (min-width: 35.938rem) {
+  .pkt-section--info {
+    padding: 1rem;
+  }
+}
+@media screen and (min-width: 48rem) {
+  .pkt-section--info {
+    padding: 1.5rem;
+  }
+}
+.pkt-section--info a.pkt-btn--ter {
+  color: black;
+}
+
+.pkt-section--frame {
+  border: 1px solid #2c2c2c;
+  margin: 1rem 0;
+  padding: 0.75rem;
+  background-color: white;
+  /*
+  @if luminance($backgroundColor) < 0.4 {
+    color: white;
+
+    a:not([class^='ok-btn']) {
+      color: white;
+      text-decoration: underline;
+    }
+  }
+  */
+}
+@media screen and (min-width: 35.938rem) {
+  .pkt-section--frame {
+    padding: 1rem;
+  }
+}
+@media screen and (min-width: 48rem) {
+  .pkt-section--frame {
+    padding: 1.5rem;
+  }
+}
+
+[class*=ok-section-] > [class^=ok-title-] {
+  margin-top: 0;
+}
+
+.pkt-section--margin-top {
+  margin-top: 2.5rem;
+}

package/dist/css/elements/section.min.css

@@ -0,0 +1 @@
+.pkt-section{margin:1rem 0}.pkt-section--dark{color:#fff;margin:1rem 0;padding:.75rem;background-color:#2a2859}@media screen and (min-width: 35.938rem){.pkt-section--dark{padding:1rem}}@media screen and (min-width: 48rem){.pkt-section--dark{padding:1.5rem}}.pkt-section--dark a.pkt-btn--ter{color:#fff}.pkt-section--danger{color:#000;margin:1rem 0;padding:.75rem;background-color:#ff8274}@media screen and (min-width: 35.938rem){.pkt-section--danger{padding:1rem}}@media screen and (min-width: 48rem){.pkt-section--danger{padding:1.5rem}}.pkt-section--danger a.pkt-btn--ter{color:#000}.pkt-section--gray,.pkt-section--grey{margin:1rem 0;padding:.75rem;background-color:#f2f2f2}@media screen and (min-width: 35.938rem){.pkt-section--gray,.pkt-section--grey{padding:1rem}}@media screen and (min-width: 48rem){.pkt-section--gray,.pkt-section--grey{padding:1.5rem}}.pkt-section--success{color:#000;margin:1rem 0;padding:.75rem;background-color:#43f8b6}@media screen and (min-width: 35.938rem){.pkt-section--success{padding:1rem}}@media screen and (min-width: 48rem){.pkt-section--success{padding:1.5rem}}.pkt-section--success a.pkt-btn--ter{color:#000}.pkt-section--warning{margin:1rem 0;padding:.75rem;background-color:#f9c66b}@media screen and (min-width: 35.938rem){.pkt-section--warning{padding:1rem}}@media screen and (min-width: 48rem){.pkt-section--warning{padding:1.5rem}}.pkt-section--info{margin:1rem 0;padding:.75rem;background-color:#b3f5ff}@media screen and (min-width: 35.938rem){.pkt-section--info{padding:1rem}}@media screen and (min-width: 48rem){.pkt-section--info{padding:1.5rem}}.pkt-section--info a.pkt-btn--ter{color:#000}.pkt-section--frame{border:1px solid #2c2c2c;margin:1rem 0;padding:.75rem;background-color:#fff}@media screen and (min-width: 35.938rem){.pkt-section--frame{padding:1rem}}@media screen and (min-width: 48rem){.pkt-section--frame{padding:1.5rem}}[class*=ok-section-]>[class^=ok-title-]{margin-top:0}.pkt-section--margin-top{margin-top:2.5rem}