@arbeidstilsynet/design-css 0.2.0 → 0.3.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 (4) hide show
  1. package/dist/src/header.css +0 -16
  2. package/dist/src/index.css +40 -13
  3. package/dist/src/lightdarklogo.css +40 -0
  4. package/package.json +3 -3
package/dist/src/header.css CHANGED
@@ -18,22 +18,6 @@
18
18
  padding: 0 var(--ds-size-4);
19
19
  }
20
20
 
21
- [data-color-scheme="light"] .at-header__title-light {
22
- display: flex;
23
- }
24
-
25
- [data-color-scheme="light"] .at-header__title-dark {
26
- display: none;
27
- }
28
-
29
- [data-color-scheme="dark"] .at-header__title-light {
30
- display: none;
31
- }
32
-
33
- [data-color-scheme="dark"] .at-header__title-dark {
34
- display: flex;
35
- }
36
-
37
21
  .at-header__title-left,
38
22
  .at-header__title-center,
39
23
  .at-header__title-right {
package/dist/src/index.css CHANGED
@@ -10,7 +10,7 @@
10
10
  @layer ds.components{:where(.ds-input){margin:0}.ds-input{--dsc-input-padding:var(--ds-size-2) var(--ds-size-3);--dsc-input-size--toggle:var(--ds-size-6);--dsc-input-size:var(--ds-size-12);--dsc-input-background--readonly:var(--ds-color-neutral-surface-tinted);--dsc-input-background:var(--ds-color-neutral-surface-default);--dsc-input-border-color--readonly:var(--ds-color-neutral-border-subtle);--dsc-input-border-color:var(--ds-color-neutral-border-default);--dsc-input-border-style:solid;--dsc-input-border-width--toggle:max(var(--ds-border-width-default),calc(var(--ds-size-1)/2));--dsc-input-border-width:var(--ds-border-width-default);--dsc-input-color--readonly:var(--ds-color-neutral-text-default);--dsc-input-color:var(--ds-color-neutral-text-default);--dsc-input-stroke-color:var(--ds-color-base-contrast-default);--dsc-input-stroke-color--invalid:var(--ds-color-danger-base-contrast-default);--dsc-input-stroke-width:0.05em;--dsc-input-accent-color:var(--ds-color-base-default);--dsc-input-accent-color--invalid:var(--ds-color-danger-text-subtle);--_dsc-input-diagonal-1:transparent calc(48% - var(--dsc-input-stroke-width));--_dsc-input-diagonal-2:currentcolor calc(50% - var(--dsc-input-stroke-width));--_dsc-input-diagonal-3:currentcolor calc(50% + var(--dsc-input-stroke-width));--_dsc-input-diagonal-4:transparent calc(52% + var(--dsc-input-stroke-width));--_dsc-input-spacing--toggle:calc(var(--ds-size-1)/2);-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--dsc-input-background);border-color:var(--dsc-input-border-color);border-radius:var(--ds-border-radius-md);border-style:var(--dsc-input-border-style);border-width:var(--dsc-input-border-width);box-sizing:border-box;color:var(--dsc-input-color);font-family:inherit;height:var(--dsc-input-size);line-height:inherit;max-width:100%;min-width:0;padding:var(--dsc-input-padding);position:relative;-webkit-print-color-adjust:exact;print-color-adjust:exact;vertical-align:middle}.ds-input:focus-visible{box-shadow:var(--_ds--focus,var(--dsc-focus-boxShadow));outline:var(--_ds--focus,var(--dsc-focus-outline));outline-offset:var(--_ds--focus,var(--ds-border-width-focus))}.ds-input:focus-visible *{--_ds--focus: }@media (forced-colors:active){.ds-input{background-color:Canvas;border-color:ButtonText}.ds-input:disabled,.ds-input[aria-disabled=true],.ds-input[readonly]{border-color:GrayText}}@supports (width:round(down,0.1em,1px)){.ds-input{border-width:round(up,var(--dsc-input-border-width),1px)}}.ds-input:not([data-size]){font-size:inherit}.ds-input:is(select){background-image:linear-gradient(45deg,var(--_dsc-input-diagonal-1),var(--_dsc-input-diagonal-2),var(--_dsc-input-diagonal-3),var(--_dsc-input-diagonal-4)),linear-gradient(-45deg,var(--_dsc-input-diagonal-1),var(--_dsc-input-diagonal-2),var(--_dsc-input-diagonal-3),var(--_dsc-input-diagonal-4));background-position:calc(100% - 1.2em + var(--dsc-input-stroke-width)),calc(100% - .8em);background-repeat:no-repeat;background-size:.4em .4em;padding-inline-end:2.4em;text-overflow:ellipsis}:dir(rtl) .ds-input:is(select){background-position:calc(1.2em - var(--dsc-input-stroke-width)),.8em}.ds-input:is(select):open{background-image:linear-gradient(-45deg,var(--_dsc-input-diagonal-1),var(--_dsc-input-diagonal-2),var(--_dsc-input-diagonal-3),var(--_dsc-input-diagonal-4)),linear-gradient(45deg,var(--_dsc-input-diagonal-1),var(--_dsc-input-diagonal-2),var(--_dsc-input-diagonal-3),var(--_dsc-input-diagonal-4))}@media (forced-colors:active){.ds-input:is(select){-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}}.ds-input:is(textarea){height:auto;min-height:calc(var(--dsc-input-size)*1.5);resize:vertical}.ds-input:is(textarea):not([rows]){field-sizing:content}.ds-input:not([size],[cols],select:where([data-width=auto])){width:100%}.ds-input:checked,.ds-input:indeterminate:where([type=checkbox]){background:var(--dsc-input-accent-color);border-color:var(--dsc-input-accent-color);color:var(--dsc-input-stroke-color)}.ds-input:disabled,.ds-input[aria-disabled=true]{cursor:not-allowed;opacity:var(--ds-opacity-disabled)}.ds-input[aria-invalid=true]{border-color:var(--dsc-input-accent-color--invalid)}.ds-input[aria-invalid=true]:where(:checked){background:var(--dsc-input-accent-color--invalid);color:var(--dsc-input-stroke-color--invalid)}.ds-input[type=checkbox][aria-invalid=true]:where(:indeterminate){background:var(--dsc-input-accent-color--invalid);color:var(--dsc-input-stroke-color--invalid)}.ds-input[readonly]{background:var(--dsc-input-background--readonly);border-color:var(--dsc-input-border-color--readonly);color:var(--dsc-input-color--readonly)}@media (forced-colors:active){.ds-input[readonly]{border-color:GrayText}}.ds-input:-moz-read-only:not([readonly],[aria-disabled=true],:disabled){cursor:pointer}.ds-input:read-only:not([readonly],[aria-disabled=true],:disabled){cursor:pointer}.ds-input[type=checkbox],.ds-input[type=radio]{border-width:var(--dsc-input-border-width--toggle);flex-shrink:0;height:var(--dsc-input-size--toggle);line-height:inherit;padding:var(--_dsc-input-spacing--toggle);width:var(--dsc-input-size--toggle)}@media (forced-colors:active){.ds-input[type=checkbox],.ds-input[type=radio]{color:Canvas}:is(.ds-input[type=checkbox],.ds-input[type=radio]):disabled,[aria-disabled=true]:is(.ds-input[type=checkbox],.ds-input[type=radio]),[readonly]:is(.ds-input[type=checkbox],.ds-input[type=radio]){border-color:GrayText}}.ds-input[type=radio]{border-radius:var(--ds-border-radius-full)}.ds-input[type=radio]:checked{background-image:radial-gradient(circle closest-side,currentcolor 45%,transparent 50%)}@media (forced-colors:active){.ds-input[type=radio]:checked{background-color:LinkText;border-color:LinkText;color:Canvas;forced-color-adjust:none}}.ds-input[type=checkbox]{border-radius:var(--ds-border-radius-sm)}.ds-input[type=checkbox]:checked{background-image:linear-gradient(45deg,var(--_dsc-input-diagonal-1),var(--_dsc-input-diagonal-2),var(--_dsc-input-diagonal-3),var(--_dsc-input-diagonal-4)),linear-gradient(-45deg,var(--_dsc-input-diagonal-1),var(--_dsc-input-diagonal-2),var(--_dsc-input-diagonal-3),var(--_dsc-input-diagonal-4));background-origin:content-box;background-position:10% 73%,90% 50%;background-repeat:no-repeat;background-size:35% 35%,65% 65%}@media (forced-colors:active){.ds-input[type=checkbox]:checked{background-color:LinkText;border-color:LinkText;forced-color-adjust:none}}.ds-input[type=checkbox]:indeterminate{background-image:linear-gradient(transparent calc(48% - var(--dsc-input-stroke-width)),currentcolor calc(50% - var(--dsc-input-stroke-width)),currentcolor calc(50% + var(--dsc-input-stroke-width)),transparent calc(52% + var(--dsc-input-stroke-width)));background-origin:content-box;background-position:50%;background-repeat:no-repeat;background-size:contain}@media (forced-colors:active){.ds-input[type=checkbox]:indeterminate{background-color:LinkText;border-color:LinkText;forced-color-adjust:none}}.ds-input[role=switch]:is([type=radio],[type=checkbox]){--_dsc-input-circle-position:left;background-image:radial-gradient(circle closest-side,currentcolor 95%,transparent 100%);background-origin:content-box;background-position:var(--_dsc-input-circle-position);background-repeat:no-repeat;background-size:calc(var(--dsc-input-size--toggle) - var(--_dsc-input-spacing--toggle)*2) 100%;border-radius:var(--ds-border-radius-full);padding-inline:0;transition:background-position .2s;width:calc(var(--dsc-input-size--toggle)*2)}.ds-input[role=switch]:is([type=radio],[type=checkbox]):checked{--_dsc-input-circle-position:right}@media (forced-colors:active){.ds-input[role=switch]:is([type=radio],[type=checkbox]):checked{color:CanvasText}}@media (forced-colors:active){.ds-input[role=switch]:is([type=radio],[type=checkbox]){color:GrayText;forced-color-adjust:none}.ds-input[role=switch][readonly]:is([type=radio],[type=checkbox]){color:GrayText}.ds-input[role=switch]:is([type=radio],[type=checkbox]):disabled,.ds-input[role=switch][aria-disabled=true]:is([type=radio],[type=checkbox]),.ds-input[role=switch][readonly]:is([type=radio],[type=checkbox]){border-color:GrayText}}}
11
11
  @layer ds.components{.ds-field{--dsc-field-content-spacing:var(--ds-size-2);-webkit-print-color-adjust:exact;print-color-adjust:exact}.ds-field>*{margin-block:0}.ds-field>*+*{margin-top:var(--dsc-field-content-spacing)}.ds-field [data-field=description]{color:var(
12
12
  --ds-color-neutral-text-subtle
13
- )}.ds-field input:not([hidden]){display:block}.ds-field:has([aria-disabled=true]:not(u-option,[role=option][aria-disabled=true]),:disabled:not(option))>*{cursor:not-allowed;opacity:var(--ds-opacity-disabled)}:is(.ds-field:has([aria-readonly=true],[readonly]) label):before{background:currentcolor;content:"";display:inline-block;height:calc(1em*var(--ds-line-height-md));height:1lh;margin-inline-end:.25ch;-webkit-mask:center/contain no-repeat var(--ds-readonly-icon-url);mask:center/contain no-repeat var(--ds-readonly-icon-url);vertical-align:bottom;width:var(--ds-readonly-icon-size)}:is(:is(.ds-field:has([aria-readonly=true],[readonly]) label):before){-webkit-print-color-adjust:exact;print-color-adjust:exact}@media (forced-colors:active){:is(.ds-field:has([aria-readonly=true],[readonly]) label):before{background:CanvasText}}.ds-field:has(input:is([type=radio],[type=checkbox])){border-radius:var(--ds-border-radius-md);grid-template-areas:"input content";grid-template-columns:auto 1fr;width:-moz-fit-content;width:fit-content}.ds-field:has(input:is([type=radio],[type=checkbox])):not([hidden]){display:grid}.ds-field:has(input:is([type=radio],[type=checkbox]))>*{grid-column:content;margin-block:0}.ds-field:has(input:is([type=radio],[type=checkbox]))>:not(input){padding-inline-start:var(--dsc-field-content-spacing)}.ds-field:has(input:is([type=radio],[type=checkbox])) label{font-weight:var(--ds-font-weight-regular)}.ds-field:has(input:is([type=radio],[type=checkbox])) label:before{content:none}.ds-field:has(input:is([type=radio],[type=checkbox])) input{grid-column:input;grid-row:1}.ds-field:has(input:is([type=radio],[type=checkbox])):not(:has([readonly],[aria-disabled=true]:not(u-option),:disabled:not(option))) label{cursor:pointer}.ds-field:has(input:is([type=radio],[type=checkbox])):has(input:focus-visible){box-shadow:var(--_ds--focus,var(--dsc-focus-boxShadow));outline:var(--_ds--focus,var(--dsc-focus-outline));outline-offset:var(--_ds--focus,var(--ds-border-width-focus))}.ds-field:has(input:is([type=radio],[type=checkbox])):has(input:focus-visible) *{--_ds--focus: }.ds-field:has(input:is([type=radio],[type=checkbox])) .ds-input:is([type=radio],[type=checkbox]):not([aria-label]){translate:0 calc(.5lh - 50%)}.ds-field[data-position=end]:has(input:is([type=radio],[type=checkbox])){grid-template-areas:"content input";grid-template-columns:1fr auto;width:auto}.ds-field[data-position=end]:has(input:is([type=radio],[type=checkbox]))>:not(input){padding-inline-end:var(--dsc-field-content-spacing);padding-inline-start:0}.ds-field-affixes{--dsc-field-affix-border-width:var(--ds-border-width-default);--dsc-field-affix-border-style:solid;--dsc-field-affix-border-color:var(--ds-color-neutral-border-default);--dsc-field-affix-padding-inline:var(--ds-size-4);background:var(--ds-color-neutral-surface-tinted);border-radius:var(--ds-border-radius-md);box-sizing:border-box;color:var(--ds-color-neutral-text-subtle);max-width:100%;white-space:nowrap}.ds-field-affixes:not([hidden]){display:flex}.ds-field-affixes:has([size]){width:-moz-fit-content;width:fit-content}.ds-field-affixes .ds-field-affix{align-items:center;border-color:var(--dsc-field-affix-border-color);border-style:var(--dsc-field-affix-border-style);border-width:var(--dsc-field-affix-border-width);flex-shrink:0;padding-inline:var(--dsc-field-affix-padding-inline)}:is(.ds-field-affixes .ds-field-affix):not([hidden]){display:flex}:is(.ds-field-affixes .ds-field-affix):first-child{border-end-start-radius:inherit;border-inline-end:0;border-start-start-radius:inherit}:is(.ds-field-affixes .ds-field-affix):last-child{border-end-end-radius:inherit;border-inline-start:0;border-start-end-radius:inherit}.ds-field-affixes .ds-input{border-style:var(--dsc-field-affix-border-style);border-width:var(--dsc-field-affix-border-width);flex:1 1 auto}:is(.ds-field-affixes .ds-input):not(:last-child){border-end-end-radius:0;border-start-end-radius:0}:is(.ds-field-affixes .ds-input):not(:first-child){border-end-start-radius:0;border-start-start-radius:0}}
13
+ )}.ds-field .ds-input:not([hidden]),.ds-field input:not([hidden]),.ds-field select:not([hidden]),.ds-field textarea:not([hidden]){display:block}.ds-field:has([aria-disabled=true]:not(u-option,[role=option][aria-disabled=true]),:disabled:not(option))>*{cursor:not-allowed;opacity:var(--ds-opacity-disabled)}:is(.ds-field:has([aria-readonly=true],[readonly]) label):before{background:currentcolor;content:"";display:inline-block;height:calc(1em*var(--ds-line-height-md));height:1lh;margin-inline-end:.25ch;-webkit-mask:center/contain no-repeat var(--ds-readonly-icon-url);mask:center/contain no-repeat var(--ds-readonly-icon-url);vertical-align:bottom;width:var(--ds-readonly-icon-size)}:is(:is(.ds-field:has([aria-readonly=true],[readonly]) label):before){-webkit-print-color-adjust:exact;print-color-adjust:exact}@media (forced-colors:active){:is(.ds-field:has([aria-readonly=true],[readonly]) label):before{background:CanvasText}}.ds-field:has(input:is([type=radio],[type=checkbox])){border-radius:var(--ds-border-radius-md);grid-template-areas:"input content";grid-template-columns:auto 1fr;width:-moz-fit-content;width:fit-content}.ds-field:has(input:is([type=radio],[type=checkbox])):not([hidden]){display:grid}.ds-field:has(input:is([type=radio],[type=checkbox]))>*{grid-column:content;margin-block:0}.ds-field:has(input:is([type=radio],[type=checkbox]))>:not(input){padding-inline-start:var(--dsc-field-content-spacing)}.ds-field:has(input:is([type=radio],[type=checkbox])) label{font-weight:var(--ds-font-weight-regular)}.ds-field:has(input:is([type=radio],[type=checkbox])) label:before{content:none}.ds-field:has(input:is([type=radio],[type=checkbox])) input{grid-column:input;grid-row:1}.ds-field:has(input:is([type=radio],[type=checkbox])):not(:has([readonly],[aria-disabled=true]:not(u-option),:disabled:not(option))) label{cursor:pointer}.ds-field:has(input:is([type=radio],[type=checkbox])):has(input:focus-visible){box-shadow:var(--_ds--focus,var(--dsc-focus-boxShadow));outline:var(--_ds--focus,var(--dsc-focus-outline));outline-offset:var(--_ds--focus,var(--ds-border-width-focus))}.ds-field:has(input:is([type=radio],[type=checkbox])):has(input:focus-visible) *{--_ds--focus: }.ds-field:has(input:is([type=radio],[type=checkbox])) .ds-input:is([type=radio],[type=checkbox]):not([aria-label]){translate:0 calc(.5lh - 50%)}.ds-field[data-position=end]:has(input:is([type=radio],[type=checkbox])){grid-template-areas:"content input";grid-template-columns:1fr auto;width:auto}.ds-field[data-position=end]:has(input:is([type=radio],[type=checkbox]))>:not(input){padding-inline-end:var(--dsc-field-content-spacing);padding-inline-start:0}.ds-field-affixes{--dsc-field-affix-border-width:var(--ds-border-width-default);--dsc-field-affix-border-style:solid;--dsc-field-affix-border-color:var(--ds-color-neutral-border-default);--dsc-field-affix-padding-inline:var(--ds-size-4);background:var(--ds-color-neutral-surface-tinted);border-radius:var(--ds-border-radius-md);box-sizing:border-box;color:var(--ds-color-neutral-text-subtle);max-width:100%;white-space:nowrap}.ds-field-affixes:not([hidden]){display:flex}.ds-field-affixes:has([size]){width:-moz-fit-content;width:fit-content}.ds-field-affixes .ds-field-affix{align-items:center;border-color:var(--dsc-field-affix-border-color);border-style:var(--dsc-field-affix-border-style);border-width:var(--dsc-field-affix-border-width);flex-shrink:0;padding-inline:var(--dsc-field-affix-padding-inline)}:is(.ds-field-affixes .ds-field-affix):not([hidden]){display:flex}:is(.ds-field-affixes .ds-field-affix):first-child{border-end-start-radius:inherit;border-inline-end:0;border-start-start-radius:inherit}:is(.ds-field-affixes .ds-field-affix):last-child{border-end-end-radius:inherit;border-inline-start:0;border-start-end-radius:inherit}.ds-field-affixes .ds-input{border-style:var(--dsc-field-affix-border-style);border-width:var(--dsc-field-affix-border-width);flex:1 1 auto}:is(.ds-field-affixes .ds-input):not(:last-child){border-end-end-radius:0;border-start-end-radius:0}:is(.ds-field-affixes .ds-input):not(:first-child){border-end-start-radius:0;border-start-start-radius:0}}
14
14
  @layer ds.components{.ds-fieldset{border:0;margin:0;min-width:0;padding:0}.ds-fieldset>legend{padding:0}:is(.ds-fieldset:has(input[readonly]):not(:has(input:not([readonly])))>legend):before{background:currentcolor;content:"";display:inline-block;height:calc(1em*var(--ds-line-height-md));height:1lh;margin-inline-end:.25ch;-webkit-mask:center/contain no-repeat var(--ds-readonly-icon-url);mask:center/contain no-repeat var(--ds-readonly-icon-url);vertical-align:bottom;width:var(--ds-readonly-icon-size)}:is(:is(.ds-fieldset:has(input[readonly]):not(:has(input:not([readonly])))>legend):before){-webkit-print-color-adjust:exact;print-color-adjust:exact}@media (forced-colors:active){:is(.ds-fieldset:has(input[readonly]):not(:has(input:not([readonly])))>legend):before{background:CanvasText}}.ds-fieldset>*+*{margin-block-start:var(--ds-size-4)}.ds-fieldset>legend+p{color:var(--ds-color-neutral-text-subtle);margin-block:var(--ds-size-1) 0}.ds-fieldset>.ds-sr-only+*{margin-block-start:0}.ds-fieldset:disabled>legend,.ds-fieldset:disabled>legend+p{opacity:var(--ds-opacity-disabled)}}
15
15
  @layer ds.components{.ds-alert{--dsc-alert-background:var(--ds-color-info-surface-tinted);--dsc-alert-border-width:var(--ds-border-width-default);--dsc-alert-border-style:solid;--dsc-alert-border-color:var(--ds-color-info-border-default);--dsc-alert-border-radius:var(--ds-border-radius-md);--dsc-alert-icon-color:var(--ds-color-info-text-subtle);--dsc-alert-icon-url:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M3.25 4A.75.75 0 0 1 4 3.25h16a.75.75 0 0 1 .75.75v16a.75.75 0 0 1-.75.75H4a.75.75 0 0 1-.75-.75zM11 7.75a1 1 0 1 1 2 0 1 1 0 0 1-2 0m-1.25 3a.75.75 0 0 1 .75-.75H12a.75.75 0 0 1 .75.75v4.75h.75a.75.75 0 0 1 0 1.5h-3a.75.75 0 0 1 0-1.5h.75v-4h-.75a.75.75 0 0 1-.75-.75'/%3E%3C/svg%3E");--dsc-alert-color:var(--ds-color-info-text-default);--dsc-alert-spacing:var(--ds-size-2);--dsc-alert-icon-size:var(--ds-size-7);--dsc-alert-padding-block:var(--ds-size-6);--dsc-alert-padding-inline-end:var(--ds-size-6);background:var(--dsc-alert-background);border-color:var(--dsc-alert-border-color);border-radius:var(--dsc-alert-border-radius);border-style:var(--dsc-alert-border-style);border-width:var(--dsc-alert-border-width);box-sizing:border-box;color:var(--dsc-alert-color);padding-block:var(--dsc-alert-padding-block);padding-inline-end:var(--dsc-alert-padding-inline-end);padding-inline-start:calc(var(--dsc-alert-padding-inline-end) + var(--dsc-alert-icon-size) + var(--dsc-alert-spacing));position:relative}.ds-alert:not(:has(>:is(h1,h2,h3,h4,h5,h6):first-child)):before,.ds-alert>:is(h1,h2,h3,h4,h5,h6):first-child:before{background:var(--dsc-alert-icon-color);content:"";height:var(--dsc-alert-icon-size);margin-inline:calc((var(--dsc-alert-icon-size) + var(--dsc-alert-spacing))*-1);-webkit-mask:var(--dsc-alert-icon-url) center /contain no-repeat;mask:var(--dsc-alert-icon-url) center /contain no-repeat;position:absolute;translate:0 calc((1lh - var(--dsc-alert-icon-size))/2);width:var(--dsc-alert-icon-size)}:is(.ds-alert>:is(h1,h2,h3,h4,h5,h6):first-child:before,.ds-alert:not(:has(>:is(h1,h2,h3,h4,h5,h6):first-child)):before){-webkit-print-color-adjust:exact;print-color-adjust:exact}@media (forced-colors:active){.ds-alert:not(:has(>:is(h1,h2,h3,h4,h5,h6):first-child)):before,.ds-alert>:is(h1,h2,h3,h4,h5,h6):first-child:before{background:CanvasText}}.ds-alert[data-color]{--dsc-alert-background:var(--ds-color-surface-tinted);--dsc-alert-border-color:var(--ds-color-border-default);--dsc-alert-icon-color:var(--ds-color-text-subtle);--dsc-alert-color:var(--ds-color-text-default)}.ds-alert[data-color=warning]{--dsc-alert-icon-url:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2.25a.75.75 0 0 1 .66.39l9.52 17.25a.75.75 0 0 1-.65 1.11H2.47a.75.75 0 0 1-.65-1.11l9.52-17.25a.75.75 0 0 1 .66-.39m0 6.5a.75.75 0 0 1 .75.75v4a.75.75 0 0 1-1.5 0v-4a.75.75 0 0 1 .75-.75m-1 7.75a1 1 0 1 1 2 0 1 1 0 0 1-2 0'/%3E%3C/svg%3E")}.ds-alert[data-color=success]{--dsc-alert-icon-url:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 21.75a9.75 9.75 0 1 0 0-19.5 9.75 9.75 0 0 0 0 19.5m4.95-12.47a.81.81 0 0 0-1.24-1.05l-5.39 6.36-2.62-2.62a.81.81 0 0 0-1.15 1.15l3.25 3.25a.81.81 0 0 0 1.2-.05z'/%3E%3C/svg%3E")}.ds-alert[data-color=danger]{--dsc-alert-icon-url:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M7.74 2.47a.75.75 0 0 1 .53-.22h7.46a.75.75 0 0 1 .53.22l5.27 5.27c.14.14.22.33.22.53v7.46a.75.75 0 0 1-.22.53l-5.27 5.27a.75.75 0 0 1-.53.22H8.27a.75.75 0 0 1-.53-.22l-5.27-5.27a.75.75 0 0 1-.22-.53V8.27a.75.75 0 0 1 .22-.53zm1.29 5.5a.75.75 0 0 0-1.06 1.06L10.94 12l-2.97 2.97a.75.75 0 1 0 1.06 1.06L12 13.06l2.97 2.97a.75.75 0 1 0 1.06-1.06L13.06 12l2.97-2.97a.75.75 0 0 0-1.06-1.06L12 10.94z'/%3E%3C/svg%3E")}.ds-popover{--dsc-popover-background:var(--ds-color-surface-default);--dsc-popover-border-width:var(--ds-border-width-default);--dsc-popover-border-style:solid;--dsc-popover-border-color:var(--ds-color-border-default);--dsc-popover-color:var(--ds-color-text-default);--dsc-popover-arrow-size:var(--ds-size-3);--dsc-popover-border-radius:var(--ds-border-radius-md);--dsc-popover-max-width:300px;--dsc-popover-padding:var(--ds-size-3) var(--ds-size-4);--dsc-popover-box-shadow:var(--ds-shadow-md);border-color:var(--dsc-popover-border-color);border-radius:var(--dsc-popover-border-radius);border-style:var(--dsc-popover-border-style);border-width:var(--dsc-popover-border-width);box-shadow:var(--dsc-popover-box-shadow);color:var(--dsc-popover-color);inset:0 auto auto 0;max-width:var(--dsc-popover-max-width);overflow:visible;padding:var(--dsc-popover-padding);position:fixed}.ds-popover,.ds-popover:before{background:var(--dsc-popover-background);box-sizing:border-box}.ds-popover:before{border:inherit;border-left-color:transparent;border-top-color:transparent;content:"";height:var(--dsc-popover-arrow-size);left:var(--ds-popover-arrow-x);position:absolute;top:var(--ds-popover-arrow-y);translate:-50% -50%;width:var(--dsc-popover-arrow-size)}.ds-popover[data-placement=top]:before{rotate:45deg}.ds-popover[data-placement=left]:before{rotate:-45deg}.ds-popover[data-placement=right]:before{rotate:135deg}.ds-popover[data-placement=bottom]:before{rotate:-135deg}.ds-popover[data-variant=default]{--dsc-popover-background:var(--ds-color-surface-default)}.ds-popover[data-variant=tinted]{--dsc-popover-background:var(--ds-color-surface-tinted)}[data-popover=inline]{all:unset;cursor:pointer;font-size:inherit;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;text-underline-offset:.27em}}
16
16
  @layer ds.components{[data-popover=inline]:not([hidden]){display:inline}[data-popover=inline]:focus-visible{box-shadow:var(--_ds--focus,var(--dsc-focus-boxShadow));outline:var(--_ds--focus,var(--dsc-focus-outline));outline-offset:var(--_ds--focus,var(--ds-border-width-focus))}[data-popover=inline]:focus-visible *{--_ds--focus: }}
@@ -184,18 +184,6 @@
184
184
  box-sizing: border-box;
185
185
  padding: 0 var(--ds-size-4);
186
186
  }
187
- [data-color-scheme="light"] .at-header__title-light {
188
- display: flex;
189
- }
190
- [data-color-scheme="light"] .at-header__title-dark {
191
- display: none;
192
- }
193
- [data-color-scheme="dark"] .at-header__title-light {
194
- display: none;
195
- }
196
- [data-color-scheme="dark"] .at-header__title-dark {
197
- display: flex;
198
- }
199
187
 
200
188
  .at-header__title-left,
201
189
  .at-header__title-center,
@@ -388,3 +376,42 @@
388
376
  display: none;
389
377
  }
390
378
  }}
379
+ @layer at.components{
380
+
381
+ .at-logo-wrapper > .at-logo {
382
+ display: flex;
383
+ }
384
+
385
+ .at-logo-dark {
386
+ display: none;
387
+ }
388
+
389
+ [data-color-scheme="light"] .at-logo-light {
390
+ display: flex;
391
+ }
392
+ [data-color-scheme="light"] .at-logo-dark {
393
+ display: none;
394
+ }
395
+
396
+ [data-color-scheme="dark"] .at-logo-light {
397
+ display: none;
398
+ }
399
+ [data-color-scheme="dark"] .at-logo-dark {
400
+ display: flex;
401
+ }
402
+
403
+ [data-color-scheme="auto"] .at-logo-light {
404
+ display: flex;
405
+ }
406
+ [data-color-scheme="auto"] .at-logo-dark {
407
+ display: none;
408
+ }
409
+
410
+ @media (prefers-color-scheme: dark) {
411
+ [data-color-scheme="auto"] .at-logo-light {
412
+ display: none;
413
+ }
414
+ [data-color-scheme="auto"] .at-logo-dark {
415
+ display: flex;
416
+ }
417
+ }}
package/dist/src/lightdarklogo.css ADDED
@@ -0,0 +1,40 @@
1
+ .at-logo-wrapper > .at-logo {
2
+ display: flex;
3
+ }
4
+
5
+ .at-logo-dark {
6
+ display: none;
7
+ }
8
+
9
+ [data-color-scheme="light"] .at-logo-light {
10
+ display: flex;
11
+ }
12
+
13
+ [data-color-scheme="light"] .at-logo-dark {
14
+ display: none;
15
+ }
16
+
17
+ [data-color-scheme="dark"] .at-logo-light {
18
+ display: none;
19
+ }
20
+
21
+ [data-color-scheme="dark"] .at-logo-dark {
22
+ display: flex;
23
+ }
24
+
25
+ [data-color-scheme="auto"] .at-logo-light {
26
+ display: flex;
27
+ }
28
+
29
+ [data-color-scheme="auto"] .at-logo-dark {
30
+ display: none;
31
+ }
32
+
33
+ @media (prefers-color-scheme: dark) {
34
+ [data-color-scheme="auto"] .at-logo-light {
35
+ display: none;
36
+ }
37
+ [data-color-scheme="auto"] .at-logo-dark {
38
+ display: flex;
39
+ }
40
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@arbeidstilsynet/design-css",
3
- "version": "0.2.0",
3
+ "version": "0.3.0",
4
4
  "description": "CSS for Designsystemet",
5
5
  "author": "Arbeidstilsynet",
6
6
  "repository": {
@@ -24,12 +24,12 @@
24
24
  "dist"
25
25
  ],
26
26
  "dependencies": {
27
- "@digdir/designsystemet-css": "1.5.0"
27
+ "@digdir/designsystemet-css": "1.5.1"
28
28
  },
29
29
  "devDependencies": {
30
30
  "autoprefixer": "10.4.21",
31
31
  "cssnano": "7.1.1",
32
- "del-cli": "6.0.0",
32
+ "del-cli": "7.0.0",
33
33
  "postcss": "8.5.6",
34
34
  "postcss-cli": "11.0.1",
35
35
  "postcss-import": "16.1.1",