@oslokommune/punkt-css 0.18.2

package/dist/scss/elements/_list.scss

@@ -0,0 +1,104 @@
+/* 
+ * List elements
+ */
+
+@use 'sass:map';
+@use '../abstracts/variables';
+@use '../abstracts/mixins/breakpoints' as *;
+
+// Container for vertical lists
+// TODO: This needs work, doesn't hold ut ATM!
+.pkt-list {
+  display: grid;
+  grid-template-columns: auto;
+  grid-template-rows: auto;
+  list-style: none;
+  padding: 0;
+  position: relative;
+  row-gap: 1.5rem;
+
+  &.two-cols-tablet-up {
+    @include bp('tablet-up') {
+      column-gap: 1.5rem;
+      grid-template-columns: 1fr 1fr;
+      grid-template-rows: auto;
+    }
+  }
+  &.three-cols-laptop-up {
+    @include bp('laptop-up') {
+      column-gap: 1.5rem;
+      grid-template-columns: 1fr 1fr 1fr;
+    }
+  }
+
+  li > a {
+    display: grid;
+    grid-template-columns: 2rem auto;
+    column-gap: 1rem;
+  }
+}
+
+// ==========================================================================
+// Definition lists
+// ==========================================================================
+
+.pkt-dl,
+.pkt-dl--narrow {
+  display: flex;
+  flex-direction: column;
+
+  @supports (display: grid) {
+    display: grid;
+    flex-direction: column;
+    grid-template-columns: 1fr;
+    margin: 0.5rem 0;
+  }
+}
+
+.pkt-dl {
+  @include bp('tablet-up') {
+    grid-template-columns: minmax(9rem, auto) 1fr;
+    border-bottom: 0;
+  }
+}
+
+@mixin dt-narrow {
+  padding: 0.5em 0 0;
+  font-size: map.get(variables.$font-size, 'size-14');
+  border-bottom: none;
+}
+
+@mixin dd-narrow {
+  padding: 0 0 0.5em;
+  font-weight: 500;
+  border-bottom: 1px solid rgba(black, 0.15);
+}
+
+.pkt-dt {
+  @include dt-narrow;
+
+  @include bp('tablet-up') {
+    font-size: inherit;
+  }
+}
+
+.pkt-dl--narrow > .pkt-dt {
+  @include dt-narrow;
+}
+
+.pkt-dd {
+  @include dd-narrow;
+
+  @include bp('tablet-up') {
+    border-bottom: 1px solid rgba(black, 0.15);
+
+    @supports (display: grid) {
+      padding: 0.25em 0 0.25em 1.25em;
+      border-bottom: 0;
+    }
+  }
+}
+
+.pkt-dl--narrow > .pkt-dd {
+  @include dd-narrow;
+}

package/dist/scss/elements/_section.scss

@@ -0,0 +1,98 @@
+/* 
+ * Section elements
+ * 
+ */
+
+@use 'sass:map';
+@use '../abstracts/variables';
+@use '../abstracts/mixins/breakpoints' as *;
+
+@mixin -section($backgroundColor: none) {
+  margin: 1rem 0;
+
+  @if $backgroundColor !=none {
+    @include bp('phablet-up') {
+      padding: 1rem;
+    }
+
+    @include bp('tablet-up') {
+      padding: 1.5rem;
+    }
+
+    padding: 0.75rem;
+    background-color: $backgroundColor;
+
+    /*
+    @if luminance($backgroundColor) < 0.4 {
+      color: white;
+
+      a:not([class^='ok-btn']) {
+        color: white;
+        text-decoration: underline;
+      }
+    }
+    */
+  }
+}
+
+.pkt-section {
+  @include -section;
+}
+
+.pkt-section--dark {
+  @include -section(map.get(variables.$colors, 'color-blue-dark'));
+  color: white;
+
+  a.pkt-btn--ter {
+    color: white;
+  }
+}
+
+.pkt-section--danger {
+  @include -section(map.get(variables.$colors, 'color-red'));
+
+  color: black;
+
+  a.pkt-btn--ter {
+    color: black;
+  }
+}
+
+.pkt-section--grey {
+  @include -section(map.get(variables.$colors, 'color-gray'));
+}
+
+.pkt-section--success {
+  @include -section(map.get(variables.$colors, 'color-green'));
+
+  color: black;
+
+  a.pkt-btn--ter {
+    color: black;
+  }
+}
+
+.pkt-section--warning {
+  @include -section(map.get(variables.$colors, 'color-yellow'));
+}
+
+.pkt-section--info {
+  @include -section(map.get(variables.$colors, 'color-blue-light'));
+
+  a.pkt-btn--ter {
+    color: black;
+  }
+}
+
+.pkt-section--frame {
+  @include -section(white);
+  border: 1px solid map.get(variables.$colors, 'oslo-grey-dark');
+}
+
+[class*='ok-section-'] > [class^='ok-title-'] {
+  margin-top: 0;
+}
+
+.pkt-section--margin-top {
+  margin-top: 2.5rem;
+}

package/dist/scss/elements/_select.scss

@@ -0,0 +1,82 @@
+/* 
+ * Select component
+ *
+ * TODO: Det er ikke optimalt løst å duplisere svg-ikonet,
+ * så dette må refaktoreres ved anledning.
+ */
+
+@use 'sass:map';
+@use '../abstracts/variables';
+@use '../abstracts/functions';
+
+@mixin -icon-arrow($status: enabled) {
+  $svg-color: #2a2859;
+  @if $status != enabled {
+    $svg-color: #b9b9b9;
+  }
+
+  $arrow: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M16 19.41L6.33 10 5 11.29 16 22l11-10.71L25.67 10 16 19.41z' fill-rule='evenodd' fill='#{$svg-color}' /></svg>") !default;
+  background-image: functions.escape-svg($arrow);
+}
+
+.pkt-select {
+  display: block;
+  background-color: var(--color-white);
+  @include -icon-arrow('enabled');
+  background-repeat: no-repeat;
+  background-position: right 0.7rem top 50%;
+  background-size: 2rem auto, 100%;
+  border: 2px solid var(--color-blue-dark);
+  border-radius: 0;
+  color: var(--color-blue-dark);
+  font-family: inherit;
+  font-size: map.get(variables.$font-size, 'size-16');
+  font-weight: normal;
+  height: 3.125rem;
+  line-height: 2rem;
+  margin: 0;
+  max-width: 100%;
+  padding: 0.4375rem 3rem 0.4375rem 0.5rem;
+  width: 100%;
+  appearance: none;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+
+  &::-ms-expand {
+    display: none;
+  }
+
+  &:enabled:focus {
+    border-color: var(--color-active);
+    outline: 2px solid var(--color-active);
+  }
+
+  &:enabled:hover {
+    --fg-color: var(--color-active);
+    border-color: var(--color-active);
+    color: var(--color-active);
+  }
+
+  &:enabled:active {
+    border-color: var(--color-active);
+    outline: none;
+  }
+
+  // Remove outline from select box in FF
+  &:-moz-focusring {
+    color: transparent;
+    text-shadow: 0 0 0 var(--color-active);
+  }
+
+  &:disabled {
+    @include -icon-arrow('disabled');
+    border-color: var(--color-grayscale-30);
+    color: var(--color-grayscale-30);
+  }
+
+  option {
+    background-color: var(--color-white);
+    color: var(--color-blue-dark);
+    font-weight: normal;
+  }
+}

package/dist/scss/elements/_table.scss

@@ -0,0 +1,80 @@
+/* 
+ * Table elements
+ */
+
+@use 'sass:map';
+@use '../abstracts/variables';
+
+$-borderRadius: 2px;
+$-boxShadow: 0 1px 3px rgba(map.get(variables.$colors, 'color-blue-dark'), 0.25);
+
+$-defaultColor: map.get(variables.$colors, 'color-gray');
+$-infoColor: map.get(variables.$colors, 'color-yellow');
+$-successColor: map.get(variables.$colors, 'color-green-light');
+$-strongColor: map.get(variables.$colors, 'color-blue-dark');
+
+.pkt-table {
+  width: 100%;
+  font-size: map.get(variables.$font-size, 'size-14');
+  border-radius: $-borderRadius;
+  border-collapse: collapse;
+
+  &__th {
+    color: black;
+    font-weight: 500;
+    text-align: left;
+    background: $-defaultColor;
+    border-bottom: 1px solid $-defaultColor;
+
+    &:first-child {
+      border-top-left-radius: $-borderRadius;
+    }
+
+    &:last-child {
+      border-top-right-radius: $-borderRadius;
+    }
+  }
+
+  th,
+  td {
+    min-width: 200px;
+    padding: 0.5rem;
+    text-align: left;
+    border-bottom: 1px solid $-defaultColor;
+  }
+
+  tbody tr:hover {
+    & > td {
+      background: rgba(map.get(variables.$colors, 'color-blue-dark'), 0.02);
+    }
+  }
+
+  &--info .pkt-table__th {
+    background: rgba($-infoColor, 0.25);
+    border-bottom: 1px solid $-infoColor;
+  }
+
+  &--success .pkt-table__th {
+    background: rgba($-successColor, 0.25);
+    border-bottom: 1px solid $-successColor;
+  }
+
+  &--strong .pkt-table__th {
+    background: rgba($-strongColor, 0.25);
+    border-bottom: 1px solid $-strongColor;
+  }
+
+  &--shadow {
+    background: white;
+    box-shadow: $-boxShadow;
+
+    & > tbody tr:last-of-type td {
+      border-bottom: none;
+    }
+  }
+}
+
+.pkt-table-container {
+  margin: 1rem 0;
+  overflow-x: auto;
+}

package/dist/scss/normalise/_index.scss

@@ -0,0 +1,241 @@
+/**
+ * Normalisering av HTML elementer
+ * I hovedsak hentet fra normalize.css 
+ * Normalize har MIT lisens. https://github.com/necolas/normalize.css
+ *
+ * Mål: 
+ * - fikse forskjeller mellom nettlesere gjennom å sette gode standardverdier
+ * - fikse rariteter og bugs noen nettlesere har
+ * - sette noen grunnverdier for å forbedre brukervennlighet
+ *
+ */
+
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Prevent adjustments of font size after orientation changes in iOS.
+ * https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/
+ */
+
+html {
+  -moz-text-size-adjust: none;
+  -webkit-text-size-adjust: none;
+  text-size-adjust: none;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre,
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in Edge.
+ */
+
+button,
+input {
+  overflow: visible;
+}
+
+/**
+  * Remove the inheritance of text transform in Edge, Firefox, and IE.
+  */
+
+button,
+select {
+  text-transform: none;
+}
+
+/**
+  * 1. Remove the default `border-radius` that macOS Chrome adds.
+  * 2. Correct the inability to style clickable types in iOS and Safari.
+  */
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  border-radius: 0; /* 1 */
+  -webkit-appearance: button; /* 2 */
+}
+
+/**
+  * Remove the inner border and padding in Firefox.
+  */
+
+button::-moz-focus-inner,
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+  * Restore the focus styles unset by the previous rule.
+  */
+
+button:-moz-focusring,
+[type='button']:-moz-focusring,
+[type='reset']:-moz-focusring,
+[type='submit']:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+  * Correct the padding in Firefox.
+  */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+  * 1. Correct the text wrapping in Edge and IE.
+  * 2. Correct the color inheritance from `fieldset` elements in IE.
+  * 3. Remove the padding so developers are not caught out when they zero out
+  *    `fieldset` elements in all browsers.
+  */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+  * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+  */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+  * 1. Remove the default vertical scrollbar in IE 10+.
+  * 2. Only resize vertically to not break containers horizontally.
+  */
+
+textarea {
+  overflow: auto; /* 1 */
+  resize: vertical; /* 2 */
+}
+
+/**
+  * Correct the cursor style of increment and decrement buttons in Chrome.
+  */
+
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+  * 1. Correct the odd appearance in Chrome and Safari.
+  * 2. Correct the outline style in Safari.
+  */
+
+[type='search'] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+  * Remove the inner padding in Chrome and Safari on macOS.
+  */
+
+[type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+  * 1. Correct the inability to style clickable types in iOS and Safari.
+  * 2. Change font properties to `inherit` in Safari.
+  */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Remove all animations and transitions for people that prefer not to see them */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
+  }
+}

package/dist/scss/pkt-base.scss

@@ -0,0 +1,4 @@
+@charset "utf-8";
+
+// Base
+@forward 'base';

package/dist/scss/pkt-components.scss

@@ -0,0 +1,4 @@
+@charset "utf-8";
+
+// Components
+@forward "components";

package/dist/scss/pkt-elements.scss

@@ -0,0 +1,4 @@
+@charset "utf-8";
+
+// HTML elements
+@forward "elements";

package/dist/scss/pkt-normalise.scss

@@ -0,0 +1,4 @@
+@charset "utf-8";
+
+// Normalise
+@forward "normalise";

package/dist/scss/pkt.scss

@@ -0,0 +1,13 @@
+@charset "utf-8";
+
+// Normalise
+@forward 'normalise';
+
+// Base
+@forward 'base';
+
+// HTML elements
+@forward 'elements';
+
+// Components
+@forward 'components';

package/index.js

@@ -0,0 +1 @@
+import './dist/css/ods.min.css';

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@oslokommune/punkt-css",
+  "version": "0.18.2",
+  "description": "Punkt - designsystem av Oslo Origo",
+  "author": "Team Min side <team-minside@oslo.kommune.no>",
+  "type": "module",
+  "main": "index.js",
+  "module": "index.js",
+  "files": [
+    "/dist",
+    "CONTRIBUTING.md",
+    "CHANGELOG.md"
+  ],
+  "license": "MIT",
+  "scripts": {
+    "build": "node ./scripts/build.js",
+    "watch": "chokidar \"src/**/*\" -c \"npm run build\"",
+    "dev": "vite serve dev/",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "chokidar-cli": "^3.0.0",
+    "edit-json-file": "^1.6.2",
+    "fs-extra": "^10.0.0",
+    "prettier": "^2.4.1",
+    "sass": "^1.55.0",
+    "svgo": "^2.8.0",
+    "svgson": "^5.2.1",
+    "vite": "^3.1.0",
+    "@oslokommune/oslo-designsystem": "^0.17.1"
+  },
+  "homepage": "https://designsystem.oslo.kommune.no",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/oslokommune/oslo-designsystem.git"
+  },
+  "bugs": {
+    "url": "https://github.com/oslokommune/oslo-designsystem/issues"
+  }
+}