@postenbring/hedwig-css 0.0.39 → 0.0.41

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 (49) hide show
  1. package/dist/accordion.css +1 -1
  2. package/dist/accordion.css.map +1 -1
  3. package/dist/all-in-one.css +1 -1
  4. package/dist/all-in-one.css.map +1 -1
  5. package/dist/badge.css +1 -1
  6. package/dist/badge.css.map +1 -1
  7. package/dist/body.css +1 -1
  8. package/dist/body.css.map +1 -1
  9. package/dist/box.css +1 -1
  10. package/dist/box.css.map +1 -1
  11. package/dist/button.css +1 -1
  12. package/dist/button.css.map +1 -1
  13. package/dist/card.css +1 -1
  14. package/dist/card.css.map +1 -1
  15. package/dist/classnames.d.ts +60 -68
  16. package/dist/error-message.css +1 -0
  17. package/dist/error-message.css.map +1 -0
  18. package/dist/fieldset.css +1 -0
  19. package/dist/fieldset.css.map +1 -0
  20. package/dist/index.css +1 -1
  21. package/dist/index.css.map +1 -1
  22. package/dist/input-group.css +1 -0
  23. package/dist/input-group.css.map +1 -0
  24. package/dist/input.css +1 -1
  25. package/dist/input.css.map +1 -1
  26. package/dist/link.css +1 -1
  27. package/dist/link.css.map +1 -1
  28. package/dist/list.css +1 -1
  29. package/dist/list.css.map +1 -1
  30. package/dist/modal.css +1 -1
  31. package/dist/modal.css.map +1 -1
  32. package/dist/navbar.css +1 -1
  33. package/dist/navbar.css.map +1 -1
  34. package/dist/prose.css +1 -1
  35. package/dist/prose.css.map +1 -1
  36. package/dist/scoped.css +1 -1
  37. package/dist/select.css +1 -1
  38. package/dist/select.css.map +1 -1
  39. package/dist/spacing.css +1 -0
  40. package/dist/spacing.css.map +1 -0
  41. package/dist/tabs.css +1 -1
  42. package/dist/tabs.css.map +1 -1
  43. package/dist/textarea.css +1 -1
  44. package/dist/textarea.css.map +1 -1
  45. package/dist/tokens.css +1 -1
  46. package/dist/tokens.css.map +1 -1
  47. package/dist/typography.css +1 -1
  48. package/dist/typography.css.map +1 -1
  49. package/package.json +2 -2
package/dist/badge.css CHANGED
@@ -1 +1 @@
1
- .hds-badge{border-radius:var(--hds-border-radius);text-transform:uppercase;font-family:var(--hds-fonts-posten-sans);-moz-osx-font-smoothing:subpixel-antialiased;-webkit-font-smoothing:subpixel-antialiased;vertical-align:10%;font-size:12px;font-weight:500;line-height:18px;display:inline-block}.hds-badge{padding:var(--hds-spacing-small-1)var(--hds-spacing-small-2)}.hds-badge.hds-badge--small{padding:var(--hds-spacing-small-1)var(--hds-spacing-small-2)}.hds-badge.hds-badge--smaller{padding:2px 6px}.hds-badge{background-color:var(--hds-brand-colors-lighter);color:var(--hds-brand-colors-dark)}.hds-badge.hds-badge--lighter{background-color:var(--hds-brand-colors-lighter);color:var(--hds-brand-colors-dark)}.hds-badge.hds-badge--dark{background-color:var(--hds-brand-colors-darker);color:var(--hds-ui-colors-white)}.hds-badge.hds-badge--white{background-color:var(--hds-ui-colors-white);color:var(--hds-brand-colors-dark)}.hds-badge.hds-badge--warning{background-color:var(--hds-ui-colors-warning-yellow);color:var(--hds-brand-link-colors-text)}
1
+ .hds-badge{border-radius:var(--hds-border-radius);text-transform:uppercase;font-family:var(--hds-fonts-posten-sans);-moz-osx-font-smoothing:subpixel-antialiased;-webkit-font-smoothing:subpixel-antialiased;vertical-align:10%;font-size:12px;font-weight:500;line-height:18px;display:inline-block}.hds-badge{padding:var(--hds-spacing-small-1)var(--hds-spacing-small-2)}.hds-badge.hds-badge--small{padding:var(--hds-spacing-small-1)var(--hds-spacing-small-2)}.hds-badge.hds-badge--smaller{padding:2px 6px}.hds-badge{background-color:var(--hds-colors-lighter);color:var(--hds-colors-dark)}.hds-badge.hds-badge--lighter{background-color:var(--hds-colors-lighter);color:var(--hds-colors-dark)}.hds-badge.hds-badge--dark{background-color:var(--hds-colors-darker);color:var(--hds-ui-colors-white)}.hds-badge.hds-badge--white{background-color:var(--hds-ui-colors-white);color:var(--hds-colors-dark)}.hds-badge.hds-badge--warning{background-color:var(--hds-ui-colors-warning-yellow);color:var(--hds-link-colors-text)}
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":null,"mappings":"AAIA,qSAgBE,wEAAA,yFAKA,8CAMA,+FAAA,kHAMA,4GAKA,2GAKA","sources":["home/runner/work/hedwig-design-system/hedwig-design-system/packages/css/src/badge/badge.css"],"sourcesContent":["/**\n * Block\n */\n\n.hds-badge {\n display: inline-block;\n border-radius: var(--hds-border-radius);\n text-transform: uppercase;\n\n /* Custom typography for this component */\n font-family: var(--hds-fonts-posten-sans);\n font-weight: 500;\n font-size: 12px;\n line-height: 18px;\n -moz-osx-font-smoothing: subpixel-antialiased;\n -webkit-font-smoothing: subpixel-antialiased;\n vertical-align: 10%;\n\n /* Size variations */\n\n &, /* Default */\n &.hds-badge--small {\n padding: var(--hds-spacing-small-1) var(--hds-spacing-small-2);\n }\n\n &.hds-badge--smaller {\n padding: 2px 6px;\n }\n\n /* Color variations */\n\n &, /* Default */\n &.hds-badge--lighter {\n background-color: var(--hds-brand-colors-lighter);\n color: var(--hds-brand-colors-dark);\n }\n\n &.hds-badge--dark {\n background-color: var(--hds-brand-colors-darker);\n color: var(--hds-ui-colors-white);\n }\n\n &.hds-badge--white {\n background-color: var(--hds-ui-colors-white);\n color: var(--hds-brand-colors-dark);\n }\n\n &.hds-badge--warning {\n background-color: var(--hds-ui-colors-warning-yellow);\n color: var(--hds-brand-link-colors-text);\n }\n}\n"],"names":[]}
1
+ {"version":3,"sourceRoot":null,"mappings":"AAIA,qSAgBE,wEAAA,yFAKA,8CAMA,mFAAA,sGAMA,sGAKA,qGAKA","sources":["home/runner/work/hedwig-design-system/hedwig-design-system/packages/css/src/badge/badge.css"],"sourcesContent":["/**\n * Block\n */\n\n.hds-badge {\n display: inline-block;\n border-radius: var(--hds-border-radius);\n text-transform: uppercase;\n\n /* Custom typography for this component */\n font-family: var(--hds-fonts-posten-sans);\n font-weight: 500;\n font-size: 12px;\n line-height: 18px;\n -moz-osx-font-smoothing: subpixel-antialiased;\n -webkit-font-smoothing: subpixel-antialiased;\n vertical-align: 10%;\n\n /* Size variations */\n\n &, /* Default */\n &.hds-badge--small {\n padding: var(--hds-spacing-small-1) var(--hds-spacing-small-2);\n }\n\n &.hds-badge--smaller {\n padding: 2px 6px;\n }\n\n /* Color variations */\n\n &, /* Default */\n &.hds-badge--lighter {\n background-color: var(--hds-colors-lighter);\n color: var(--hds-colors-dark);\n }\n\n &.hds-badge--dark {\n background-color: var(--hds-colors-darker);\n color: var(--hds-ui-colors-white);\n }\n\n &.hds-badge--white {\n background-color: var(--hds-ui-colors-white);\n color: var(--hds-colors-dark);\n }\n\n &.hds-badge--warning {\n background-color: var(--hds-ui-colors-warning-yellow);\n color: var(--hds-link-colors-text);\n }\n}\n"],"names":[]}
package/dist/body.css CHANGED
@@ -1 +1 @@
1
- :root{box-sizing:border-box;font:var(--hds-typography-body);fill:var(--hds-ui-colors-black);color:var(--hds-ui-colors-black);cursor:auto;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;line-height:1.4}body{background:var(--hds-ui-colors-white);font:var(--hds-typography-body)}h1{font:var(--hds-brand-typography-h1)}h2{font:var(--hds-brand-typography-h2)}h3{font:var(--hds-typography-header-h3)}h4,h5,h6{font:var(--hds-typography-body-title)}
1
+ :root{box-sizing:border-box;font:var(--hds-typography-body);fill:var(--hds-ui-colors-black);color:var(--hds-ui-colors-black);cursor:auto;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;line-height:1.4}body{background:var(--hds-ui-colors-white);font:var(--hds-typography-body)}h1{font:var(--hds-typography-h1)}h2{font:var(--hds-typography-h2)}h3{font:var(--hds-typography-h3)}h4,h5,h6{font:var(--hds-typography-body-title)}:where(p,a,button,h1,h2,h3,h4,h5,h6){margin:0;padding:0}
package/dist/body.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":null,"mappings":"AAMA,8NAWA,2EAcA,uCAIA,uCAIA,wCASA","sources":["home/runner/work/hedwig-design-system/hedwig-design-system/packages/css/src/body.css"],"sourcesContent":["/*\n * All element selector, and general global styles should be defined in this file\n *\n * Based on hedwig global css\n * https://github.com/bring/hedwig/blob/master/src/shared/base/body.css\n */\n:root {\n box-sizing: border-box;\n font: var(--hds-typography-body);\n fill: var(--hds-ui-colors-black);\n color: var(--hds-ui-colors-black);\n line-height: 1.4;\n cursor: auto;\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n}\n\nbody {\n background: var(--hds-ui-colors-white);\n\n /* Get specificity on the same level as the font decleration in the \n * legacy Hedwig CSS, making it possible to override by ordering */\n font: var(--hds-typography-body);\n}\n\n/**\n * Default typography for headings\n *\n * Since hedwig legacy sets default font-family\n * we need to override it to get the correct `Posten Sans`\n */\nh1 {\n font: var(--hds-brand-typography-h1);\n}\n\nh2 {\n font: var(--hds-brand-typography-h2);\n}\n\nh3 {\n font: var(--hds-typography-header-h3);\n}\n\n/*\n * Uncommon to use these levels,\n * but default to body-title.\n * The consumer should override to whatever fit's their need\n */\nh4,\nh5,\nh6 {\n font: var(--hds-typography-body-title);\n}\n"],"names":[]}
1
+ {"version":3,"sourceRoot":null,"mappings":"AAMA,8NAWA,2EAcA,iCAIA,iCAIA,iCASA,+CASA","sources":["home/runner/work/hedwig-design-system/hedwig-design-system/packages/css/src/body.css"],"sourcesContent":["/*\n * All element selector, and general global styles should be defined in this file\n *\n * Based on hedwig global css\n * https://github.com/bring/hedwig/blob/master/src/shared/base/body.css\n */\n:root {\n box-sizing: border-box;\n font: var(--hds-typography-body);\n fill: var(--hds-ui-colors-black);\n color: var(--hds-ui-colors-black);\n line-height: 1.4;\n cursor: auto;\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n}\n\nbody {\n background: var(--hds-ui-colors-white);\n\n /* Get specificity on the same level as the font decleration in the \n * legacy Hedwig CSS, making it possible to override by ordering */\n font: var(--hds-typography-body);\n}\n\n/**\n * Default typography for headings\n *\n * Since hedwig legacy sets default font-family\n * we need to override it to get the correct `Posten Sans`\n */\nh1 {\n font: var(--hds-typography-h1);\n}\n\nh2 {\n font: var(--hds-typography-h2);\n}\n\nh3 {\n font: var(--hds-typography-h3);\n}\n\n/*\n * Uncommon to use these levels,\n * but default to body-title.\n * The consumer should override to whatever fit's their need\n */\nh4,\nh5,\nh6 {\n font: var(--hds-typography-body-title);\n}\n\n/**\n * Reset spacing but with a lower specificity\n */\n:where(p, a, button, h1, h2, h3, h4, h5, h6) {\n padding: 0;\n margin: 0;\n}\n"],"names":[]}
package/dist/box.css CHANGED
@@ -1 +1 @@
1
- .hds-box{border-radius:var(--hds-border-radius);--hds-component-box-padding:var(--hds-spacing-medium-2);padding:var(--hds-component-box-padding);position:relative}.hds-box{background-color:var(--hds-ui-colors-light-grey-fill)}.hds-box.hds-box--light-grey{background-color:var(--hds-ui-colors-light-grey-fill)}.hds-box.hds-box--lighter{background-color:var(--hds-brand-colors-lighter)}.hds-box.hds-box--white{background-color:var(--hds-ui-colors-white);box-shadow:var(--hds-shadow-default)}.hds-box.hds-box--warning{background-color:var(--hds-ui-colors-warning-yellow)}@media (min-width:720px){.hds-box{--hds-component-box-padding:var(--hds-spacing-medium-3)}}.hds-box.hds-box--closed{display:none}.hds-box .hds-box__close-button{top:var(--hds-spacing-small-4);right:var(--hds-spacing-small-4);cursor:pointer;transition:filter var(--hds-micro-animation-duration-quick)var(--hds-micro-animation-easing-normal);background:url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M13.1602 12.25L16.7812 8.66406L17.5195 7.92578C17.625 7.82031 17.625 7.64453 17.5195 7.50391L16.7461 6.73047C16.6055 6.625 16.4297 6.625 16.3242 6.73047L12 11.0898L7.64062 6.73047C7.53516 6.625 7.35938 6.625 7.21875 6.73047L6.44531 7.50391C6.33984 7.64453 6.33984 7.82031 6.44531 7.92578L10.8047 12.25L6.44531 16.6094C6.33984 16.7148 6.33984 16.8906 6.44531 17.0312L7.21875 17.8047C7.35938 17.9102 7.53516 17.9102 7.64062 17.8047L12 13.4453L15.5859 17.0664L16.3242 17.8047C16.4297 17.9102 16.6055 17.9102 16.7461 17.8047L17.5195 17.0312C17.625 16.8906 17.625 16.7148 17.5195 16.6094L13.1602 12.25Z\" fill=\"black\"/></svg>");border:none;width:24px;height:24px;padding:0;position:absolute}.hds-box .hds-box__close-button:hover{filter:invert(40%)}.hds-box .hds-box__close-button:active{box-shadow:0 0 0 2px var(--hds-ui-colors-black-hover);outline:none}
1
+ .hds-box{border-radius:var(--hds-border-radius);--hds-component-box-padding:var(--hds-spacing-medium-2);padding:var(--hds-component-box-padding);position:relative}.hds-box{background-color:var(--hds-ui-colors-light-grey-fill)}.hds-box.hds-box--light-grey{background-color:var(--hds-ui-colors-light-grey-fill)}.hds-box.hds-box--lighter{background-color:var(--hds-colors-lighter)}.hds-box.hds-box--white{background-color:var(--hds-ui-colors-white);box-shadow:var(--hds-shadow-default)}.hds-box.hds-box--warning{background-color:var(--hds-ui-colors-warning-yellow)}@media (min-width:720px){.hds-box{--hds-component-box-padding:var(--hds-spacing-medium-3)}}.hds-box.hds-box--closed{display:none}.hds-box .hds-box__close-button{--hds-close-button-padding:var(--hds-spacing-small-2);width:calc(24px + var(--hds-close-button-padding));height:calc(24px + var(--hds-close-button-padding));top:calc(var(--hds-spacing-small-4) - var(--hds-close-button-padding)/2);right:calc(var(--hds-spacing-small-4) - var(--hds-close-button-padding)/2);border-radius:var(--hds-border-radius);cursor:pointer;transition:filter var(--hds-micro-animation-duration-quick)var(--hds-micro-animation-easing-normal);background-color:transparent;background-image:url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M13.1602 12.25L16.7812 8.66406L17.5195 7.92578C17.625 7.82031 17.625 7.64453 17.5195 7.50391L16.7461 6.73047C16.6055 6.625 16.4297 6.625 16.3242 6.73047L12 11.0898L7.64062 6.73047C7.53516 6.625 7.35938 6.625 7.21875 6.73047L6.44531 7.50391C6.33984 7.64453 6.33984 7.82031 6.44531 7.92578L10.8047 12.25L6.44531 16.6094C6.33984 16.7148 6.33984 16.8906 6.44531 17.0312L7.21875 17.8047C7.35938 17.9102 7.53516 17.9102 7.64062 17.8047L12 13.4453L15.5859 17.0664L16.3242 17.8047C16.4297 17.9102 16.6055 17.9102 16.7461 17.8047L17.5195 17.0312C17.625 16.8906 17.625 16.7148 17.5195 16.6094L13.1602 12.25Z\" fill=\"black\"/></svg>");background-position:50%;border:none;padding:0;position:absolute}.hds-box .hds-box__close-button:hover{background-color:rgba(0,0,0,.1)}.hds-box .hds-box__close-button:active{background-color:rgba(0,0,0,.2)}.hds-box .hds-box__close-button:focus-visible{outline-offset:2px;box-shadow:0 0 0 2px var(--hds-ui-colors-black-hover);outline:2px solid transparent}
package/dist/box.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":null,"mappings":"AAEA,mKAIE,+DAAA,mFAKA,2EAIA,yGAKA,+EAOA,yBAAmB,kEAOnB,sCASF,yhCAmBE,yDAKA","sources":["home/runner/work/hedwig-design-system/hedwig-design-system/packages/css/src/box/box.css","home/runner/work/hedwig-design-system/hedwig-design-system/packages/css/src/box/../_custom-media.css"],"sourcesContent":["@import url(\"../_custom-media.css\");\n\n.hds-box {\n position: relative;\n border-radius: var(--hds-border-radius);\n\n &, /* Default */\n &.hds-box--light-grey {\n background-color: var(--hds-ui-colors-light-grey-fill);\n }\n\n &.hds-box--lighter {\n background-color: var(--hds-brand-colors-lighter);\n }\n\n &.hds-box--white {\n background-color: var(--hds-ui-colors-white);\n box-shadow: var(--hds-shadow-default);\n }\n\n &.hds-box--warning {\n background-color: var(--hds-ui-colors-warning-yellow);\n }\n\n /* Padding */\n --hds-component-box-padding: var(--hds-spacing-medium-2);\n\n @media (--medium) {\n --hds-component-box-padding: var(--hds-spacing-medium-3);\n }\n\n padding: var(--hds-component-box-padding);\n\n /* Closed state */\n &.hds-box--closed {\n display: none;\n }\n}\n\n/**\n * Close button\n * TODO: Styling for the hover and focus effect can be improved upon\n */\n.hds-box .hds-box__close-button {\n /* Icon */\n width: 24px;\n height: 24px;\n background: transparent;\n background-image: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M13.1602 12.25L16.7812 8.66406L17.5195 7.92578C17.625 7.82031 17.625 7.64453 17.5195 7.50391L16.7461 6.73047C16.6055 6.625 16.4297 6.625 16.3242 6.73047L12 11.0898L7.64062 6.73047C7.53516 6.625 7.35938 6.625 7.21875 6.73047L6.44531 7.50391C6.33984 7.64453 6.33984 7.82031 6.44531 7.92578L10.8047 12.25L6.44531 16.6094C6.33984 16.7148 6.33984 16.8906 6.44531 17.0312L7.21875 17.8047C7.35938 17.9102 7.53516 17.9102 7.64062 17.8047L12 13.4453L15.5859 17.0664L16.3242 17.8047C16.4297 17.9102 16.6055 17.9102 16.7461 17.8047L17.5195 17.0312C17.625 16.8906 17.625 16.7148 17.5195 16.6094L13.1602 12.25Z\" fill=\"black\"/></svg>');\n\n /* Positioning */\n position: absolute;\n top: var(--hds-spacing-small-4);\n right: var(--hds-spacing-small-4);\n padding: 0;\n border: none;\n cursor: pointer;\n\n /* Hover effect */\n transition: filter var(--hds-micro-animation-duration-quick)\n var(--hds-micro-animation-easing-normal);\n\n &:hover {\n filter: invert(40%);\n }\n\n /* Active effect */\n &:active {\n outline: none;\n box-shadow: 0 0 0 2px var(--hds-ui-colors-black-hover);\n }\n}\n","/**\n * Reusable media queries using the hedwig breakpoint\n *\n * As of writing custom-media queries are not yet supported in browsers\n * but lightningcss transpiles them to the standard media query syntax.\n *\n * https://www.w3.org/TR/mediaqueries-5/#custom-mq\n */\n\n/* Mobile first */\n@custom-media --small (width >= 460px);\n@custom-media --medium (width >= 720px);\n@custom-media --large (width >= 940px);\n@custom-media --xlarge (width >= 1200px);\n\n/* Desktop first */\n@custom-media --before-small (width < 460px);\n@custom-media --before-medium (width < 720px);\n@custom-media --before-large (width < 940px);\n@custom-media --before-xlarge (width < 1200px);\n"],"names":[]}
1
+ {"version":3,"sourceRoot":null,"mappings":"AAEA,mKAIE,+DAAA,mFAKA,qEAIA,yGAKA,+EAOA,yBAAmB,kEAOnB,sCASF,q1CAuBE,sEAKA,uEAOA","sources":["home/runner/work/hedwig-design-system/hedwig-design-system/packages/css/src/box/box.css","home/runner/work/hedwig-design-system/hedwig-design-system/packages/css/src/box/../_custom-media.css"],"sourcesContent":["@import url(\"../_custom-media.css\");\n\n.hds-box {\n position: relative;\n border-radius: var(--hds-border-radius);\n\n &, /* Default */\n &.hds-box--light-grey {\n background-color: var(--hds-ui-colors-light-grey-fill);\n }\n\n &.hds-box--lighter {\n background-color: var(--hds-colors-lighter);\n }\n\n &.hds-box--white {\n background-color: var(--hds-ui-colors-white);\n box-shadow: var(--hds-shadow-default);\n }\n\n &.hds-box--warning {\n background-color: var(--hds-ui-colors-warning-yellow);\n }\n\n /* Padding */\n --hds-component-box-padding: var(--hds-spacing-medium-2);\n\n @media (--medium) {\n --hds-component-box-padding: var(--hds-spacing-medium-3);\n }\n\n padding: var(--hds-component-box-padding);\n\n /* Closed state */\n &.hds-box--closed {\n display: none;\n }\n}\n\n/**\n * Close button\n * TODO: Styling for the hover and focus effect can be improved upon\n */\n.hds-box .hds-box__close-button {\n --hds-close-button-padding: var(--hds-spacing-small-2);\n\n /* Icon */\n width: calc(24px + var(--hds-close-button-padding));\n height: calc(24px + var(--hds-close-button-padding));\n background-color: transparent;\n background-image: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M13.1602 12.25L16.7812 8.66406L17.5195 7.92578C17.625 7.82031 17.625 7.64453 17.5195 7.50391L16.7461 6.73047C16.6055 6.625 16.4297 6.625 16.3242 6.73047L12 11.0898L7.64062 6.73047C7.53516 6.625 7.35938 6.625 7.21875 6.73047L6.44531 7.50391C6.33984 7.64453 6.33984 7.82031 6.44531 7.92578L10.8047 12.25L6.44531 16.6094C6.33984 16.7148 6.33984 16.8906 6.44531 17.0312L7.21875 17.8047C7.35938 17.9102 7.53516 17.9102 7.64062 17.8047L12 13.4453L15.5859 17.0664L16.3242 17.8047C16.4297 17.9102 16.6055 17.9102 16.7461 17.8047L17.5195 17.0312C17.625 16.8906 17.625 16.7148 17.5195 16.6094L13.1602 12.25Z\" fill=\"black\"/></svg>');\n background-position: center;\n\n /* Positioning */\n position: absolute;\n top: calc(var(--hds-spacing-small-4) - var(--hds-close-button-padding) / 2);\n right: calc(var(--hds-spacing-small-4) - var(--hds-close-button-padding) / 2);\n padding: 0;\n border: none;\n border-radius: var(--hds-border-radius);\n cursor: pointer;\n\n /* Hover effect */\n transition: filter var(--hds-micro-animation-duration-quick)\n var(--hds-micro-animation-easing-normal);\n\n &:hover {\n background-color: rgb(0 0 0 / 10%);\n }\n\n /* Active effect */\n &:active {\n background-color: rgb(0 0 0 / 20%);\n\n /* outline: none; */\n }\n\n /* Keyboard focus */\n &:focus-visible {\n outline: 2px solid transparent;\n outline-offset: 2px;\n box-shadow: 0 0 0 2px var(--hds-ui-colors-black-hover);\n }\n}\n","/**\n * Reusable media queries using the hedwig breakpoint\n *\n * As of writing custom-media queries are not yet supported in browsers\n * but lightningcss transpiles them to the standard media query syntax.\n *\n * https://www.w3.org/TR/mediaqueries-5/#custom-mq\n */\n\n/* Mobile first */\n@custom-media --small (width >= 460px);\n@custom-media --medium (width >= 720px);\n@custom-media --large (width >= 940px);\n@custom-media --xlarge (width >= 1200px);\n\n/* Desktop first */\n@custom-media --before-small (width < 460px);\n@custom-media --before-medium (width < 720px);\n@custom-media --before-large (width < 940px);\n@custom-media --before-xlarge (width < 1200px);\n"],"names":[]}
package/dist/button.css CHANGED
@@ -1 +1 @@
1
- .hds-button{--hds-component-button-border-width:0px;-webkit-font-smoothing:antialiased;-webkit-appearance:button;-ms-appearance:button;appearance:button;box-sizing:border-box;border-radius:var(--hds-border-radius);border-style:solid;border-width:var(--hds-component-button-border-width);transition:all var(--hds-micro-animation-duration-quick)var(--hds-micro-animation-easing-normal);cursor:pointer;word-break:normal;font:var(--hds-typography-body-small-title);text-align:center;text-decoration:none;display:inline-block}.hds-button.hds-button--small{--hds-component-button-small-y-padding:10px;font-size:var(--hds-font-size-technical-title-max);line-height:var(--hds-line-height-technical-title-max);padding:calc(var(--hds-component-button-small-y-padding) - var(--hds-component-button-border-width))calc(var(--hds-spacing-small-4) - var(--hds-component-button-border-width));min-height:44px}.hds-button.hds-button--medium{font-size:var(--hds-font-size-body-small-title-max);line-height:var(--hds-line-height-body-small-title-max);padding:calc(var(--hds-spacing-small-3) - var(--hds-component-button-border-width))calc(var(--hds-spacing-medium-1) - var(--hds-component-button-border-width));min-height:50px}.hds-button.hds-button--large{font-size:var(--hds-font-size-body-small-title-max);line-height:var(--hds-line-height-body-small-title-max);padding:calc(var(--hds-spacing-small-4) - var(--hds-component-button-border-width))calc(var(--hds-spacing-medium-2) - var(--hds-component-button-border-width));min-height:58px}.hds-button.hds-button--full{width:100%}@media (max-width:719.999px){.hds-button.hds-button--mobile-full{width:100%}}.hds-button.hds-button--primary{background-color:var(--hds-brand-colors-signature);color:var(--hds-brand-button-colors-text);fill:var(--hds-brand-button-colors-text)}.hds-button.hds-button--primary:hover{background-color:var(--hds-brand-colors-signature-hover);outline:0 solid var(--hds-brand-colors-signature-hover)}.hds-button.hds-button--primary:active{background-color:var(--hds-brand-colors-signature);outline:0 solid var(--hds-brand-colors-signature-hover)}.hds-button.hds-button--secondary{background-color:var(--hds-brand-colors-darker);color:var(--hds-ui-colors-white);fill:var(--hds-ui-colors-white)}.hds-button.hds-button--secondary:hover{background-color:var(--hds-ui-colors-black);outline:0 solid var(--hds-ui-colors-black)}.hds-button.hds-button--secondary:active{background-color:var(--hds-brand-colors-darker);outline:0 solid var(--hds-ui-colors-black)}.hds-button.hds-button--outline-primary{--hds-component-button-border-width:var(--hds-stroke-default);border-color:var(--hds-brand-colors-signature);color:var(--hds-ui-colors-black);fill:var(--hds-ui-colors-black);outline-offset:3px;background-color:transparent}.hds-button.hds-button--outline-primary:hover{color:var(--hds-brand-colors-dark);fill:var(--hds-brand-colors-dark);border-color:var(--hds-brand-colors-dark)}.hds-button.hds-button--outline-primary:active{color:var(--hds-brand-colors-dark);fill:var(--hds-brand-colors-dark);border-color:var(--hds-brand-colors-dark)}.hds-button.hds-button--outline-secondary{--hds-component-button-border-width:var(--hds-stroke-default);border-color:var(--hds-brand-colors-darker);color:var(--hds-brand-colors-darker);fill:var(--hds-brand-colors-darker);outline-offset:3px;background-color:transparent}.hds-button.hds-button--outline-secondary:hover{color:var(--hds-ui-colors-black);fill:var(--hds-ui-colors-black);border-color:var(--hds-ui-colors-black)}.hds-button.hds-button--outline-secondary:active{color:var(--hds-ui-colors-black);fill:var(--hds-ui-colors-black);border-color:var(--hds-ui-colors-black)}.hds-button.hds-button--outline-white{--hds-component-button-border-width:var(--hds-stroke-default);border-color:var(--hds-brand-colors-light);color:var(--hds-ui-colors-white);fill:var(--hds-ui-colors-white);outline-offset:3px;background-color:transparent}.hds-button.hds-button--outline-white:hover{color:var(--hds-brand-colors-light);fill:var(--hds-brand-colors-light)}.hds-button.hds-button--outline-white:active{color:var(--hds-brand-colors-light);fill:var(--hds-brand-colors-light)}.hds-button:disabled.hds-button--primary{color:var(--hds-ui-colors-dark-grey);fill:var(--hds-ui-colors-dark-grey);background-color:var(--hds-ui-colors-grey);border-color:var(--hds-ui-colors-grey);box-shadow:none;cursor:default;outline:0}.hds-button:disabled.hds-button--secondary{color:var(--hds-ui-colors-dark-grey);fill:var(--hds-ui-colors-dark-grey);background-color:var(--hds-ui-colors-grey);border-color:var(--hds-ui-colors-grey);box-shadow:none;cursor:default;outline:0}.hds-button:disabled.hds-button--outline-primary{border-color:var(--hds-ui-colors-grey);color:var(--hds-ui-colors-dark-grey);fill:var(--hds-ui-colors-dark-grey);cursor:default;background-color:transparent}.hds-button:disabled.hds-button--outline-secondary{border-color:var(--hds-ui-colors-grey);color:var(--hds-ui-colors-dark-grey);fill:var(--hds-ui-colors-dark-grey);cursor:default;background-color:transparent}.hds-button[disabled].hds-button--primary{color:var(--hds-ui-colors-dark-grey);fill:var(--hds-ui-colors-dark-grey);background-color:var(--hds-ui-colors-grey);border-color:var(--hds-ui-colors-grey);box-shadow:none;cursor:default;outline:0}.hds-button[disabled].hds-button--secondary{color:var(--hds-ui-colors-dark-grey);fill:var(--hds-ui-colors-dark-grey);background-color:var(--hds-ui-colors-grey);border-color:var(--hds-ui-colors-grey);box-shadow:none;cursor:default;outline:0}.hds-button[disabled].hds-button--outline-primary{border-color:var(--hds-ui-colors-grey);color:var(--hds-ui-colors-dark-grey);fill:var(--hds-ui-colors-dark-grey);cursor:default;background-color:transparent}.hds-button[disabled].hds-button--outline-secondary{border-color:var(--hds-ui-colors-grey);color:var(--hds-ui-colors-dark-grey);fill:var(--hds-ui-colors-dark-grey);cursor:default;background-color:transparent}.hds-button[disabled]:active.hds-button--primary{color:var(--hds-ui-colors-dark-grey);fill:var(--hds-ui-colors-dark-grey);background-color:var(--hds-ui-colors-grey);border-color:var(--hds-ui-colors-grey);box-shadow:none;cursor:default;outline:0}.hds-button[disabled]:active.hds-button--secondary{color:var(--hds-ui-colors-dark-grey);fill:var(--hds-ui-colors-dark-grey);background-color:var(--hds-ui-colors-grey);border-color:var(--hds-ui-colors-grey);box-shadow:none;cursor:default;outline:0}.hds-button[disabled]:active.hds-button--outline-primary{border-color:var(--hds-ui-colors-grey);color:var(--hds-ui-colors-dark-grey);fill:var(--hds-ui-colors-dark-grey);cursor:default;background-color:transparent}.hds-button[disabled]:active.hds-button--outline-secondary{border-color:var(--hds-ui-colors-grey);color:var(--hds-ui-colors-dark-grey);fill:var(--hds-ui-colors-dark-grey);cursor:default;background-color:transparent}.hds-button.hds-button--icon-only{justify-content:center;align-items:center;padding:0;display:inline-flex}.hds-button.hds-button--icon-only.hds-button--small{width:44px;height:44px}.hds-button.hds-button--icon-only.hds-button--small *{width:24px;height:24px}.hds-button.hds-button--icon-only.hds-button--medium{width:50px;height:50px}.hds-button.hds-button--icon-only.hds-button--medium *{width:32px;height:32px}.hds-button.hds-button--icon-only.hds-button--large{width:58px;height:58px}.hds-button.hds-button--icon-only.hds-button--large *{width:32px;height:32px}
1
+ .hds-button{--hds-component-button-border-width:0px;-webkit-font-smoothing:antialiased;-webkit-appearance:button;-ms-appearance:button;appearance:button;box-sizing:border-box;border-radius:var(--hds-border-radius);border-style:solid;border-width:var(--hds-component-button-border-width);transition:all var(--hds-micro-animation-duration-quick)var(--hds-micro-animation-easing-normal);cursor:pointer;word-break:normal;font:var(--hds-typography-body-small-title);text-align:center;text-decoration:none;display:inline-block}.hds-button.hds-button--small{--hds-component-button-small-y-padding:10px;font-size:var(--hds-font-size-technical-title-max);line-height:var(--hds-line-height-technical-title-max);padding:calc(var(--hds-component-button-small-y-padding) - var(--hds-component-button-border-width))calc(var(--hds-spacing-small-4) - var(--hds-component-button-border-width));min-height:44px}.hds-button.hds-button--medium{font-size:var(--hds-font-size-body-small-title-max);line-height:var(--hds-line-height-body-small-title-max);padding:calc(var(--hds-spacing-small-3) - var(--hds-component-button-border-width))calc(var(--hds-spacing-medium-1) - var(--hds-component-button-border-width));min-height:50px}.hds-button.hds-button--large{font-size:var(--hds-font-size-body-small-title-max);line-height:var(--hds-line-height-body-small-title-max);padding:calc(var(--hds-spacing-small-4) - var(--hds-component-button-border-width))calc(var(--hds-spacing-medium-2) - var(--hds-component-button-border-width));min-height:58px}.hds-button.hds-button--full{width:100%}@media (max-width:719.999px){.hds-button.hds-button--mobile-full{width:100%}}.hds-button.hds-button--primary{background-color:var(--hds-colors-signature);color:var(--hds-button-colors-text);fill:var(--hds-button-colors-text)}.hds-button.hds-button--primary:hover{background-color:var(--hds-colors-signature-hover);outline:0 solid var(--hds-colors-signature-hover)}.hds-button.hds-button--primary:active{background-color:var(--hds-colors-signature);outline:0 solid var(--hds-colors-signature-hover)}.hds-button.hds-button--secondary{background-color:var(--hds-colors-darker);color:var(--hds-ui-colors-white);fill:var(--hds-ui-colors-white)}.hds-button.hds-button--secondary:hover{background-color:var(--hds-ui-colors-black);outline:0 solid var(--hds-ui-colors-black)}.hds-button.hds-button--secondary:active{background-color:var(--hds-colors-darker);outline:0 solid var(--hds-ui-colors-black)}.hds-button.hds-button--outline-primary{--hds-component-button-border-width:var(--hds-stroke-default);border-color:var(--hds-colors-signature);color:var(--hds-ui-colors-black);fill:var(--hds-ui-colors-black);outline-offset:3px;background-color:transparent}.hds-button.hds-button--outline-primary:hover{color:var(--hds-colors-dark);fill:var(--hds-colors-dark);border-color:var(--hds-colors-dark)}.hds-button.hds-button--outline-primary:active{color:var(--hds-colors-dark);fill:var(--hds-colors-dark);border-color:var(--hds-colors-dark)}.hds-button.hds-button--outline-secondary{--hds-component-button-border-width:var(--hds-stroke-default);border-color:var(--hds-colors-darker);color:var(--hds-colors-darker);fill:var(--hds-colors-darker);outline-offset:3px;background-color:transparent}.hds-button.hds-button--outline-secondary:hover{color:var(--hds-ui-colors-black);fill:var(--hds-ui-colors-black);border-color:var(--hds-ui-colors-black)}.hds-button.hds-button--outline-secondary:active{color:var(--hds-ui-colors-black);fill:var(--hds-ui-colors-black);border-color:var(--hds-ui-colors-black)}.hds-button.hds-button--outline-white{--hds-component-button-border-width:var(--hds-stroke-default);border-color:var(--hds-colors-light);color:var(--hds-ui-colors-white);fill:var(--hds-ui-colors-white);outline-offset:3px;background-color:transparent}.hds-button.hds-button--outline-white:hover{color:var(--hds-colors-light);fill:var(--hds-colors-light)}.hds-button.hds-button--outline-white:active{color:var(--hds-colors-light);fill:var(--hds-colors-light)}.hds-button:disabled.hds-button--primary{color:var(--hds-ui-colors-dark-grey);fill:var(--hds-ui-colors-dark-grey);background-color:var(--hds-ui-colors-grey);border-color:var(--hds-ui-colors-grey);box-shadow:none;cursor:default;outline:0}.hds-button:disabled.hds-button--secondary{color:var(--hds-ui-colors-dark-grey);fill:var(--hds-ui-colors-dark-grey);background-color:var(--hds-ui-colors-grey);border-color:var(--hds-ui-colors-grey);box-shadow:none;cursor:default;outline:0}.hds-button:disabled.hds-button--outline-primary{border-color:var(--hds-ui-colors-grey);color:var(--hds-ui-colors-dark-grey);fill:var(--hds-ui-colors-dark-grey);cursor:default;background-color:transparent}.hds-button:disabled.hds-button--outline-secondary{border-color:var(--hds-ui-colors-grey);color:var(--hds-ui-colors-dark-grey);fill:var(--hds-ui-colors-dark-grey);cursor:default;background-color:transparent}.hds-button[disabled].hds-button--primary{color:var(--hds-ui-colors-dark-grey);fill:var(--hds-ui-colors-dark-grey);background-color:var(--hds-ui-colors-grey);border-color:var(--hds-ui-colors-grey);box-shadow:none;cursor:default;outline:0}.hds-button[disabled].hds-button--secondary{color:var(--hds-ui-colors-dark-grey);fill:var(--hds-ui-colors-dark-grey);background-color:var(--hds-ui-colors-grey);border-color:var(--hds-ui-colors-grey);box-shadow:none;cursor:default;outline:0}.hds-button[disabled].hds-button--outline-primary{border-color:var(--hds-ui-colors-grey);color:var(--hds-ui-colors-dark-grey);fill:var(--hds-ui-colors-dark-grey);cursor:default;background-color:transparent}.hds-button[disabled].hds-button--outline-secondary{border-color:var(--hds-ui-colors-grey);color:var(--hds-ui-colors-dark-grey);fill:var(--hds-ui-colors-dark-grey);cursor:default;background-color:transparent}.hds-button[disabled]:active.hds-button--primary{color:var(--hds-ui-colors-dark-grey);fill:var(--hds-ui-colors-dark-grey);background-color:var(--hds-ui-colors-grey);border-color:var(--hds-ui-colors-grey);box-shadow:none;cursor:default;outline:0}.hds-button[disabled]:active.hds-button--secondary{color:var(--hds-ui-colors-dark-grey);fill:var(--hds-ui-colors-dark-grey);background-color:var(--hds-ui-colors-grey);border-color:var(--hds-ui-colors-grey);box-shadow:none;cursor:default;outline:0}.hds-button[disabled]:active.hds-button--outline-primary{border-color:var(--hds-ui-colors-grey);color:var(--hds-ui-colors-dark-grey);fill:var(--hds-ui-colors-dark-grey);cursor:default;background-color:transparent}.hds-button[disabled]:active.hds-button--outline-secondary{border-color:var(--hds-ui-colors-grey);color:var(--hds-ui-colors-dark-grey);fill:var(--hds-ui-colors-dark-grey);cursor:default;background-color:transparent}.hds-button.hds-button--icon-only{justify-content:center;align-items:center;padding:0;display:inline-flex}.hds-button.hds-button--icon-only.hds-button--small{width:44px;height:44px}.hds-button.hds-button--icon-only.hds-button--small *{width:24px;height:24px}.hds-button.hds-button--icon-only.hds-button--medium{width:50px;height:50px}.hds-button.hds-button--icon-only.hds-button--medium *{width:32px;height:32px}.hds-button.hds-button--icon-only.hds-button--large{width:58px;height:58px}.hds-button.hds-button--icon-only.hds-button--large *{width:32px;height:32px}
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":null,"mappings":"AAEA,ygBAsBE,oXAeA,2TAUA,0TAcA,wCAKE,6BAA0B,gDAS5B,sKAKE,uJAKA,kJAMF,mJAKE,+HAKA,oIAMF,sQASE,6JAAA,8JAQF,6QASE,yJAAA,0JAQF,gQASE,mHAAA,oHAcA,6OAAA,+OAWA,6MAAA,+MAXA,8OAAA,gPAWA,8MAAA,gNAXA,qPAAA,uPAWA,qNAAA,uNAeF,0GAaE,2EAIE,6EAMF,4EAIE,8EAMF,2EAIE","sources":["home/runner/work/hedwig-design-system/hedwig-design-system/packages/css/src/button/button.css","home/runner/work/hedwig-design-system/hedwig-design-system/packages/css/src/button/../_custom-media.css"],"sourcesContent":["@import url(\"../_custom-media.css\");\n\n.hds-button {\n --hds-component-button-border-width: 0px;\n\n -webkit-font-smoothing: antialiased;\n appearance: button;\n box-sizing: border-box;\n display: inline-block;\n border-style: solid;\n border-radius: var(--hds-border-radius);\n border-width: var(--hds-component-button-border-width);\n transition: all var(--hds-micro-animation-duration-quick) var(--hds-micro-animation-easing-normal);\n cursor: pointer;\n word-break: normal;\n font: var(--hds-typography-body-small-title);\n\n /* When used as a link (<a>) */\n text-decoration: none;\n text-align: center;\n\n /**\n * Modifiers: sizes\n */\n &.hds-button--small {\n /* In figma, the actual padding for the text is 10px */\n --hds-component-button-small-y-padding: 10px;\n\n font-size: var(--hds-font-size-technical-title-max);\n line-height: var(--hds-line-height-technical-title-max);\n padding: calc(\n var(--hds-component-button-small-y-padding) - var(--hds-component-button-border-width)\n )\n calc(var(--hds-spacing-small-4) - var(--hds-component-button-border-width));\n\n /* The height can be more if the text inside the button wraps */\n min-height: 44px;\n }\n\n &.hds-button--medium {\n font-size: var(--hds-font-size-body-small-title-max);\n line-height: var(--hds-line-height-body-small-title-max);\n padding: calc(var(--hds-spacing-small-3) - var(--hds-component-button-border-width))\n calc(var(--hds-spacing-medium-1) - var(--hds-component-button-border-width));\n\n /* The height can be more if the text inside the button wraps */\n min-height: 50px;\n }\n\n &.hds-button--large {\n font-size: var(--hds-font-size-body-small-title-max);\n line-height: var(--hds-line-height-body-small-title-max);\n padding: calc(var(--hds-spacing-small-4) - var(--hds-component-button-border-width))\n calc(var(--hds-spacing-medium-2) - var(--hds-component-button-border-width));\n\n /* The height can be more if the text inside the button wraps */\n min-height: 58px;\n }\n\n /**\n * Modifiers: Width\n */\n\n &.hds-button--full {\n width: 100%;\n }\n\n &.hds-button--mobile-full {\n @media (--before-medium) {\n width: 100%;\n }\n }\n\n /**\n * Modifiers: Variants\n */\n\n &.hds-button--primary {\n background-color: var(--hds-brand-colors-signature);\n color: var(--hds-brand-button-colors-text);\n fill: var(--hds-brand-button-colors-text);\n\n &:hover {\n background-color: var(--hds-brand-colors-signature-hover);\n outline: 0 solid var(--hds-brand-colors-signature-hover);\n }\n\n &:active {\n background-color: var(--hds-brand-colors-signature);\n outline: 0 solid var(--hds-brand-colors-signature-hover);\n }\n }\n\n &.hds-button--secondary {\n background-color: var(--hds-brand-colors-darker);\n color: var(--hds-ui-colors-white);\n fill: var(--hds-ui-colors-white);\n\n &:hover {\n background-color: var(--hds-ui-colors-black);\n outline: 0 solid var(--hds-ui-colors-black);\n }\n\n &:active {\n background-color: var(--hds-brand-colors-darker);\n outline: 0 solid var(--hds-ui-colors-black);\n }\n }\n\n &.hds-button--outline-primary {\n --hds-component-button-border-width: var(--hds-stroke-default);\n\n background-color: transparent;\n border-color: var(--hds-brand-colors-signature);\n color: var(--hds-ui-colors-black);\n fill: var(--hds-ui-colors-black);\n outline-offset: 3px;\n\n &:hover,\n &:active {\n color: var(--hds-brand-colors-dark);\n fill: var(--hds-brand-colors-dark);\n border-color: var(--hds-brand-colors-dark);\n }\n }\n\n &.hds-button--outline-secondary {\n --hds-component-button-border-width: var(--hds-stroke-default);\n\n background-color: transparent;\n border-color: var(--hds-brand-colors-darker);\n color: var(--hds-brand-colors-darker);\n fill: var(--hds-brand-colors-darker);\n outline-offset: 3px;\n\n &:hover,\n &:active {\n color: var(--hds-ui-colors-black);\n fill: var(--hds-ui-colors-black);\n border-color: var(--hds-ui-colors-black);\n }\n }\n\n &.hds-button--outline-white {\n --hds-component-button-border-width: var(--hds-stroke-default);\n\n background-color: transparent;\n border-color: var(--hds-brand-colors-light);\n color: var(--hds-ui-colors-white);\n fill: var(--hds-ui-colors-white);\n outline-offset: 3px;\n\n &:hover,\n &:active {\n color: var(--hds-brand-colors-light);\n fill: var(--hds-brand-colors-light);\n }\n }\n\n /**\n * State: Disabled\n */\n\n &:disabled,\n &[disabled],\n &[disabled]:active {\n &.hds-button--primary,\n &.hds-button--secondary {\n color: var(--hds-ui-colors-dark-grey);\n fill: var(--hds-ui-colors-dark-grey);\n background-color: var(--hds-ui-colors-grey);\n border-color: var(--hds-ui-colors-grey);\n outline: 0;\n box-shadow: none;\n cursor: default;\n }\n\n &.hds-button--outline-primary,\n &.hds-button--outline-secondary {\n border-color: var(--hds-ui-colors-grey);\n color: var(--hds-ui-colors-dark-grey);\n fill: var(--hds-ui-colors-dark-grey);\n background-color: transparent;\n cursor: default;\n }\n }\n\n /**\n * Variant: Icon only\n * TODO: Support text + icon on either left or right side.\n * See button component in digdir/designsystemet and nav/aksel\n */\n &.hds-button--icon-only {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n\n /**\n * Modifiers: sizes\n *\n * TODO: Consider/figure out using css variables for these values\n * must make sense, not just choosing a value that matches for the sake of it\n */\n\n &.hds-button--small {\n height: 44px;\n width: 44px;\n\n & * {\n height: 24px;\n width: 24px;\n }\n }\n\n &.hds-button--medium {\n height: 50px;\n width: 50px;\n\n & * {\n height: 32px;\n width: 32px;\n }\n }\n\n &.hds-button--large {\n height: 58px;\n width: 58px;\n\n & * {\n height: 32px;\n width: 32px;\n }\n }\n }\n}\n","/**\n * Reusable media queries using the hedwig breakpoint\n *\n * As of writing custom-media queries are not yet supported in browsers\n * but lightningcss transpiles them to the standard media query syntax.\n *\n * https://www.w3.org/TR/mediaqueries-5/#custom-mq\n */\n\n/* Mobile first */\n@custom-media --small (width >= 460px);\n@custom-media --medium (width >= 720px);\n@custom-media --large (width >= 940px);\n@custom-media --xlarge (width >= 1200px);\n\n/* Desktop first */\n@custom-media --before-small (width < 460px);\n@custom-media --before-medium (width < 720px);\n@custom-media --before-large (width < 940px);\n@custom-media --before-xlarge (width < 1200px);\n"],"names":[]}
1
+ {"version":3,"sourceRoot":null,"mappings":"AAEA,ygBAsBE,oXAeA,2TAUA,0TAcA,wCAKE,6BAA0B,gDAS5B,oJAKE,2IAKA,sIAMF,6IAKE,+HAKA,8HAMF,gQASE,2IAAA,4IAQF,2PASE,yJAAA,0JAQF,0PASE,uGAAA,wGAcA,6OAAA,+OAWA,6MAAA,+MAXA,8OAAA,gPAWA,8MAAA,gNAXA,qPAAA,uPAWA,qNAAA,uNAeF,0GAaE,2EAIE,6EAMF,4EAIE,8EAMF,2EAIE","sources":["home/runner/work/hedwig-design-system/hedwig-design-system/packages/css/src/button/button.css","home/runner/work/hedwig-design-system/hedwig-design-system/packages/css/src/button/../_custom-media.css"],"sourcesContent":["@import url(\"../_custom-media.css\");\n\n.hds-button {\n --hds-component-button-border-width: 0px;\n\n -webkit-font-smoothing: antialiased;\n appearance: button;\n box-sizing: border-box;\n display: inline-block;\n border-style: solid;\n border-radius: var(--hds-border-radius);\n border-width: var(--hds-component-button-border-width);\n transition: all var(--hds-micro-animation-duration-quick) var(--hds-micro-animation-easing-normal);\n cursor: pointer;\n word-break: normal;\n font: var(--hds-typography-body-small-title);\n\n /* When used as a link (<a>) */\n text-decoration: none;\n text-align: center;\n\n /**\n * Modifiers: sizes\n */\n &.hds-button--small {\n /* In figma, the actual padding for the text is 10px */\n --hds-component-button-small-y-padding: 10px;\n\n font-size: var(--hds-font-size-technical-title-max);\n line-height: var(--hds-line-height-technical-title-max);\n padding: calc(\n var(--hds-component-button-small-y-padding) - var(--hds-component-button-border-width)\n )\n calc(var(--hds-spacing-small-4) - var(--hds-component-button-border-width));\n\n /* The height can be more if the text inside the button wraps */\n min-height: 44px;\n }\n\n &.hds-button--medium {\n font-size: var(--hds-font-size-body-small-title-max);\n line-height: var(--hds-line-height-body-small-title-max);\n padding: calc(var(--hds-spacing-small-3) - var(--hds-component-button-border-width))\n calc(var(--hds-spacing-medium-1) - var(--hds-component-button-border-width));\n\n /* The height can be more if the text inside the button wraps */\n min-height: 50px;\n }\n\n &.hds-button--large {\n font-size: var(--hds-font-size-body-small-title-max);\n line-height: var(--hds-line-height-body-small-title-max);\n padding: calc(var(--hds-spacing-small-4) - var(--hds-component-button-border-width))\n calc(var(--hds-spacing-medium-2) - var(--hds-component-button-border-width));\n\n /* The height can be more if the text inside the button wraps */\n min-height: 58px;\n }\n\n /**\n * Modifiers: Width\n */\n\n &.hds-button--full {\n width: 100%;\n }\n\n &.hds-button--mobile-full {\n @media (--before-medium) {\n width: 100%;\n }\n }\n\n /**\n * Modifiers: Variants\n */\n\n &.hds-button--primary {\n background-color: var(--hds-colors-signature);\n color: var(--hds-button-colors-text);\n fill: var(--hds-button-colors-text);\n\n &:hover {\n background-color: var(--hds-colors-signature-hover);\n outline: 0 solid var(--hds-colors-signature-hover);\n }\n\n &:active {\n background-color: var(--hds-colors-signature);\n outline: 0 solid var(--hds-colors-signature-hover);\n }\n }\n\n &.hds-button--secondary {\n background-color: var(--hds-colors-darker);\n color: var(--hds-ui-colors-white);\n fill: var(--hds-ui-colors-white);\n\n &:hover {\n background-color: var(--hds-ui-colors-black);\n outline: 0 solid var(--hds-ui-colors-black);\n }\n\n &:active {\n background-color: var(--hds-colors-darker);\n outline: 0 solid var(--hds-ui-colors-black);\n }\n }\n\n &.hds-button--outline-primary {\n --hds-component-button-border-width: var(--hds-stroke-default);\n\n background-color: transparent;\n border-color: var(--hds-colors-signature);\n color: var(--hds-ui-colors-black);\n fill: var(--hds-ui-colors-black);\n outline-offset: 3px;\n\n &:hover,\n &:active {\n color: var(--hds-colors-dark);\n fill: var(--hds-colors-dark);\n border-color: var(--hds-colors-dark);\n }\n }\n\n &.hds-button--outline-secondary {\n --hds-component-button-border-width: var(--hds-stroke-default);\n\n background-color: transparent;\n border-color: var(--hds-colors-darker);\n color: var(--hds-colors-darker);\n fill: var(--hds-colors-darker);\n outline-offset: 3px;\n\n &:hover,\n &:active {\n color: var(--hds-ui-colors-black);\n fill: var(--hds-ui-colors-black);\n border-color: var(--hds-ui-colors-black);\n }\n }\n\n &.hds-button--outline-white {\n --hds-component-button-border-width: var(--hds-stroke-default);\n\n background-color: transparent;\n border-color: var(--hds-colors-light);\n color: var(--hds-ui-colors-white);\n fill: var(--hds-ui-colors-white);\n outline-offset: 3px;\n\n &:hover,\n &:active {\n color: var(--hds-colors-light);\n fill: var(--hds-colors-light);\n }\n }\n\n /**\n * State: Disabled\n */\n\n &:disabled,\n &[disabled],\n &[disabled]:active {\n &.hds-button--primary,\n &.hds-button--secondary {\n color: var(--hds-ui-colors-dark-grey);\n fill: var(--hds-ui-colors-dark-grey);\n background-color: var(--hds-ui-colors-grey);\n border-color: var(--hds-ui-colors-grey);\n outline: 0;\n box-shadow: none;\n cursor: default;\n }\n\n &.hds-button--outline-primary,\n &.hds-button--outline-secondary {\n border-color: var(--hds-ui-colors-grey);\n color: var(--hds-ui-colors-dark-grey);\n fill: var(--hds-ui-colors-dark-grey);\n background-color: transparent;\n cursor: default;\n }\n }\n\n /**\n * Variant: Icon only\n * TODO: Support text + icon on either left or right side.\n * See button component in digdir/designsystemet and nav/aksel\n */\n &.hds-button--icon-only {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n\n /**\n * Modifiers: sizes\n *\n * TODO: Consider/figure out using css variables for these values\n * must make sense, not just choosing a value that matches for the sake of it\n */\n\n &.hds-button--small {\n height: 44px;\n width: 44px;\n\n & * {\n height: 24px;\n width: 24px;\n }\n }\n\n &.hds-button--medium {\n height: 50px;\n width: 50px;\n\n & * {\n height: 32px;\n width: 32px;\n }\n }\n\n &.hds-button--large {\n height: 58px;\n width: 58px;\n\n & * {\n height: 32px;\n width: 32px;\n }\n }\n }\n}\n","/**\n * Reusable media queries using the hedwig breakpoint\n *\n * As of writing custom-media queries are not yet supported in browsers\n * but lightningcss transpiles them to the standard media query syntax.\n *\n * https://www.w3.org/TR/mediaqueries-5/#custom-mq\n */\n\n/* Mobile first */\n@custom-media --small (width >= 460px);\n@custom-media --medium (width >= 720px);\n@custom-media --large (width >= 940px);\n@custom-media --xlarge (width >= 1200px);\n\n/* Desktop first */\n@custom-media --before-small (width < 460px);\n@custom-media --before-medium (width < 720px);\n@custom-media --before-large (width < 940px);\n@custom-media --before-xlarge (width < 1200px);\n"],"names":[]}
package/dist/card.css CHANGED
@@ -1 +1 @@
1
- .hds-card{border-bottom:initial;-webkit-text-decoration:initial;text-decoration:initial;background:var(--hds-brand-colors-lighter);border-radius:var(--hds-border-radius);transition:transform var(--hds-micro-animation-duration-normal);color:var(--hds-ui-colors-black);flex-direction:column;display:flex;position:relative}.hds-card:hover{box-shadow:0 1px 3px rgba(0,0,0,.12)}.hds-card:hover:after{opacity:1}.hds-card .hds-card__media{width:-moz-fit-content;width:fit-content}.hds-card .hds-card__media .hds-card__media__img{width:100%}.hds-card .hds-card__body{padding:var(--hds-spacing-medium-2)}.hds-card .hds-card__body:hover{color:initial}.hds-card .hds-card__body-header{margin-top:0;margin-bottom:0}.hds-card .hds-card__body-header-overline{font-size:var(--hds-font-size-technical-title);color:var(--hds-brand-colors-dark);display:block}.hds-card .hds-card__body-header-title{font-size:var(--hds-brand-font-size-h2-min);font-weight:var(--hds-font-weight-header-h3);line-height:var(--hds-spacing-medium-4)}.hds-card .hds-card__body-action-arrow{background-image:url("data:image/svg+xml,<svg width=\"24\" height=\"25\" viewBox=\"0 0 24 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.7891 5.25229L11.0859 5.92026C10.9102 6.09604 10.9102 6.37729 11.0859 6.51791L16.5352 11.9671H4.54688C4.30078 11.9671 4.125 12.1781 4.125 12.389V13.3734C4.125 13.6195 4.30078 13.7953 4.54688 13.7953H16.5352L11.0859 19.2796C10.9102 19.4203 10.9102 19.7015 11.0859 19.8773L11.7891 20.5453C11.9297 20.721 12.2109 20.721 12.3867 20.5453L19.7344 13.1976C19.9102 13.0218 19.9102 12.7757 19.7344 12.5999L12.3867 5.25229C12.2109 5.07651 11.9297 5.07651 11.7891 5.25229Z\" fill=\"black\"/></svg>");border-bottom:none;width:20px;height:20px;display:block}
1
+ .hds-card{border-bottom:initial;-webkit-text-decoration:initial;text-decoration:initial;background:var(--hds-colors-lighter);border-radius:var(--hds-border-radius);transition:box-shadow var(--hds-micro-animation-duration-normal)var(--hds-micro-animation-easing-normal);color:var(--hds-ui-colors-black);flex-direction:column;display:flex;position:relative}.hds-card:hover{box-shadow:0 1px 3px rgba(0,0,0,.12)}.hds-card:hover:after{opacity:1}.hds-card .hds-card__media{width:-moz-fit-content;width:fit-content}.hds-card .hds-card__media .hds-card__media__img{width:100%}.hds-card .hds-card__body{padding:var(--hds-spacing-medium-2)}@media (min-width:940px){.hds-card .hds-card__body{padding:var(--hds-spacing-medium-3)}}.hds-card .hds-card__body:hover{color:initial}.hds-card .hds-card__body-header{margin-top:0;margin-bottom:0}.hds-card .hds-card__body-header-overline{color:var(--hds-colors-dark);font-family:var(--hds-fonts-posten-sans);font-size:var(--hds-font-size-technical-max);font-weight:var(--hds-font-weight-technical);line-height:var(--hds-line-height-technical-max);display:block}.hds-card .hds-card__body-header-title{font-size:var(--hds-font-size-h2-min);font-weight:var(--hds-font-weight-h3);line-height:var(--hds-line-height-h2-max)}.hds-card .hds-card__body-description{margin-top:var(--hds-spacing-small-4);font-family:var(--hds-fonts-posten-sans);font-size:var(--hds-font-size-technical-max);font-weight:var(--hds-font-weight-technical);line-height:var(--hds-line-height-technical-max)}@media (min-width:940px){.hds-card .hds-card__body-description{margin-top:var(--hds-spacing-medium-1)}}.hds-card .hds-card__body-action{margin-top:var(--hds-spacing-small-4);display:inline-block}@media (min-width:940px){.hds-card .hds-card__body-action{margin-top:var(--hds-spacing-medium-1)}}.hds-card .hds-card__body-action-arrow{margin-top:var(--hds-spacing-small-4);display:inline-block}@media (min-width:940px){.hds-card .hds-card__body-action-arrow{margin-top:var(--hds-spacing-medium-1)}}.hds-card .hds-card__body-action-arrow{background-image:url("data:image/svg+xml,<svg width=\"24\" height=\"25\" viewBox=\"0 0 24 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.7891 5.25229L11.0859 5.92026C10.9102 6.09604 10.9102 6.37729 11.0859 6.51791L16.5352 11.9671H4.54688C4.30078 11.9671 4.125 12.1781 4.125 12.389V13.3734C4.125 13.6195 4.30078 13.7953 4.54688 13.7953H16.5352L11.0859 19.2796C10.9102 19.4203 10.9102 19.7015 11.0859 19.8773L11.7891 20.5453C11.9297 20.721 12.2109 20.721 12.3867 20.5453L19.7344 13.1976C19.9102 13.0218 19.9102 12.7757 19.7344 12.5999L12.3867 5.25229C12.2109 5.07651 11.9297 5.07651 11.7891 5.25229Z\" fill=\"black\"/></svg>");border-bottom:none;width:20px;height:20px}
package/dist/card.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":null,"mappings":"AACA,gUAWE,qDAGE,gCAKF,oEAGE,4DAKF,8DAGE,8CAKF,8DAKA,0IAMA,wKAMA","sources":["home/runner/work/hedwig-design-system/hedwig-design-system/packages/css/src/card/card.css"],"sourcesContent":["/* stylelint-disable selector-class-pattern */\n.hds-card {\n position: relative;\n border-bottom: initial;\n text-decoration: initial;\n background: var(--hds-brand-colors-lighter);\n border-radius: var(--hds-border-radius);\n transition: transform var(--hds-micro-animation-duration-normal);\n display: flex;\n flex-direction: column;\n color: var(--hds-ui-colors-black);\n\n &:hover {\n box-shadow: 0 1px 3px 0 rgba(0 0 0 / 12%);\n\n &::after {\n opacity: 1;\n }\n }\n\n .hds-card__media {\n width: fit-content;\n\n .hds-card__media__img {\n width: 100%;\n }\n }\n\n .hds-card__body {\n padding: var(--hds-spacing-medium-2);\n\n &:hover {\n color: initial;\n }\n }\n\n .hds-card__body-header {\n margin-top: 0;\n margin-bottom: 0;\n }\n\n .hds-card__body-header-overline {\n display: block;\n font-size: var(--hds-font-size-technical-title);\n color: var(--hds-brand-colors-dark);\n }\n\n .hds-card__body-header-title {\n font-size: var(--hds-brand-font-size-h2-min);\n font-weight: var(--hds-font-weight-header-h3);\n line-height: var(--hds-spacing-medium-4);\n }\n\n .hds-card__body-action-arrow {\n background-image: url('data:image/svg+xml,<svg width=\"24\" height=\"25\" viewBox=\"0 0 24 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.7891 5.25229L11.0859 5.92026C10.9102 6.09604 10.9102 6.37729 11.0859 6.51791L16.5352 11.9671H4.54688C4.30078 11.9671 4.125 12.1781 4.125 12.389V13.3734C4.125 13.6195 4.30078 13.7953 4.54688 13.7953H16.5352L11.0859 19.2796C10.9102 19.4203 10.9102 19.7015 11.0859 19.8773L11.7891 20.5453C11.9297 20.721 12.2109 20.721 12.3867 20.5453L19.7344 13.1976C19.9102 13.0218 19.9102 12.7757 19.7344 12.5999L12.3867 5.25229C12.2109 5.07651 11.9297 5.07651 11.7891 5.25229Z\" fill=\"black\"/></svg>');\n width: 20px;\n height: 20px;\n display: block;\n border-bottom: none;\n }\n}\n"],"names":[]}
1
+ {"version":3,"sourceRoot":null,"mappings":"AAGA,mWAYE,qDAGE,gCAKF,oEAGE,4DAKF,8DAGE,yBAAkB,+DAIlB,8CAKF,8DAKA,yQASA,6JAMA,gQAGE,yBAAkB,8EAUpB,4FAKE,yBAAkB,yEALpB,kGAKE,yBAAkB,+EAKpB","sources":["home/runner/work/hedwig-design-system/hedwig-design-system/packages/css/src/card/card.css","home/runner/work/hedwig-design-system/hedwig-design-system/packages/css/src/card/../_custom-media.css"],"sourcesContent":["@import url(\"../_custom-media.css\");\n\n/* stylelint-disable selector-class-pattern */\n.hds-card {\n position: relative;\n border-bottom: initial;\n text-decoration: initial;\n background: var(--hds-colors-lighter);\n border-radius: var(--hds-border-radius);\n transition: box-shadow var(--hds-micro-animation-duration-normal)\n var(--hds-micro-animation-easing-normal);\n display: flex;\n flex-direction: column;\n color: var(--hds-ui-colors-black);\n\n &:hover {\n box-shadow: 0 1px 3px 0 rgba(0 0 0 / 12%);\n\n &::after {\n opacity: 1;\n }\n }\n\n .hds-card__media {\n width: fit-content;\n\n .hds-card__media__img {\n width: 100%;\n }\n }\n\n .hds-card__body {\n padding: var(--hds-spacing-medium-2);\n\n @media (--large) {\n padding: var(--hds-spacing-medium-3);\n }\n\n &:hover {\n color: initial;\n }\n }\n\n .hds-card__body-header {\n margin-top: 0;\n margin-bottom: 0;\n }\n\n .hds-card__body-header-overline {\n display: block;\n color: var(--hds-colors-dark);\n font-family: var(--hds-fonts-posten-sans);\n font-size: var(--hds-font-size-technical-max);\n font-weight: var(--hds-font-weight-technical);\n line-height: var(--hds-line-height-technical-max);\n }\n\n .hds-card__body-header-title {\n font-size: var(--hds-font-size-h2-min);\n font-weight: var(--hds-font-weight-h3);\n line-height: var(--hds-line-height-h2-max);\n }\n\n .hds-card__body-description {\n margin-top: var(--hds-spacing-small-4);\n\n @media (--large) {\n margin-top: var(--hds-spacing-medium-1);\n }\n\n font-family: var(--hds-fonts-posten-sans);\n font-size: var(--hds-font-size-technical-max);\n font-weight: var(--hds-font-weight-technical);\n line-height: var(--hds-line-height-technical-max);\n }\n\n .hds-card__body-action,\n .hds-card__body-action-arrow {\n display: inline-block;\n margin-top: var(--hds-spacing-small-4);\n\n @media (--large) {\n margin-top: var(--hds-spacing-medium-1);\n }\n }\n\n .hds-card__body-action-arrow {\n background-image: url('data:image/svg+xml,<svg width=\"24\" height=\"25\" viewBox=\"0 0 24 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.7891 5.25229L11.0859 5.92026C10.9102 6.09604 10.9102 6.37729 11.0859 6.51791L16.5352 11.9671H4.54688C4.30078 11.9671 4.125 12.1781 4.125 12.389V13.3734C4.125 13.6195 4.30078 13.7953 4.54688 13.7953H16.5352L11.0859 19.2796C10.9102 19.4203 10.9102 19.7015 11.0859 19.8773L11.7891 20.5453C11.9297 20.721 12.2109 20.721 12.3867 20.5453L19.7344 13.1976C19.9102 13.0218 19.9102 12.7757 19.7344 12.5999L12.3867 5.25229C12.2109 5.07651 11.9297 5.07651 11.7891 5.25229Z\" fill=\"black\"/></svg>');\n width: 20px;\n height: 20px;\n border-bottom: none;\n }\n}\n","/**\n * Reusable media queries using the hedwig breakpoint\n *\n * As of writing custom-media queries are not yet supported in browsers\n * but lightningcss transpiles them to the standard media query syntax.\n *\n * https://www.w3.org/TR/mediaqueries-5/#custom-mq\n */\n\n/* Mobile first */\n@custom-media --small (width >= 460px);\n@custom-media --medium (width >= 720px);\n@custom-media --large (width >= 940px);\n@custom-media --xlarge (width >= 1200px);\n\n/* Desktop first */\n@custom-media --before-small (width < 460px);\n@custom-media --before-medium (width < 720px);\n@custom-media --before-large (width < 940px);\n@custom-media --before-xlarge (width < 1200px);\n"],"names":[]}
@@ -4,13 +4,13 @@ export type ClassNames =
4
4
  | "hds-accordion"
5
5
  | "hds-accordion-item"
6
6
  | "hds-accordion-item__expanded"
7
- | "hds-accordion-item-trigger"
8
- | "hds-accordion-item-trigger--icon"
9
- | "hds-accordion-item-trigger--icon-chevron"
10
- | "hds-accordion-item-trigger--icon-chevron-down"
11
- | "hds-accordion-item-trigger--open"
7
+ | "hds-accordion-item-header"
8
+ | "hds-accordion-item-header--icon"
9
+ | "hds-accordion-item-header--open"
12
10
  | "hds-accordion-item-content"
13
11
  | "hds-accordion-item-content--closed"
12
+ | "hds-accordion-item-content-inner"
13
+ | "hds-accordion--no-indent"
14
14
  | "hds-badge"
15
15
  | "hds-badge--small"
16
16
  | "hds-badge--smaller"
@@ -46,15 +46,9 @@ export type ClassNames =
46
46
  | "hds-card__body-header"
47
47
  | "hds-card__body-header-overline"
48
48
  | "hds-card__body-header-title"
49
+ | "hds-card__body-description"
50
+ | "hds-card__body-action"
49
51
  | "hds-card__body-action-arrow"
50
- | "hds-input"
51
- | "hds-input--error"
52
- | "hds-input__input-wrapper"
53
- | "hds-input__input"
54
- | "hds-input--default"
55
- | "hds-input--white"
56
- | "hds-input__label"
57
- | "hds-input__error-message"
58
52
  | "hds-container"
59
53
  | "hds-container--default"
60
54
  | "hds-container--slim"
@@ -100,19 +94,19 @@ export type ClassNames =
100
94
  | "hds-message__description"
101
95
  | "hds-modal"
102
96
  | "hds-modal__header"
97
+ | "hds-modal__content"
98
+ | "hds-modal__footer"
99
+ | "hds-modal-scroll-lock"
103
100
  | "hds-navbar"
104
101
  | "hds-navbar__expandable-menu-trigger"
105
102
  | "hds-navbar__expandable-menu-content"
103
+ | "hds-navbar__button"
104
+ | "hds-navbar__navigation"
106
105
  | "hds-navbar__logo"
107
106
  | "hds-theme-bring"
108
- | "hds-select"
109
- | "hds-select__label"
110
- | "hds-select--error"
111
- | "hds-select__select-wrapper"
112
- | "hds-select__select"
113
- | "hds-select--default"
114
- | "hds-select--white"
115
- | "hds-select__error-message"
107
+ | "hds-prose"
108
+ | "hds-prose--small"
109
+ | "hds-prose--darkmode"
116
110
  | "hds-tabs"
117
111
  | "hds-tabs--list"
118
112
  | "hds-tabs--list-horizontal"
@@ -120,61 +114,46 @@ export type ClassNames =
120
114
  | "hds-tabs--tab-active"
121
115
  | "hds-tabs--list-vertical"
122
116
  | "hds-tabs--contents"
123
- | "hds-textarea"
124
- | "hds-textarea--error"
125
- | "hds-textarea__textarea-wrapper"
126
- | "hds-textarea__textarea"
127
- | "hds-textarea--default"
128
- | "hds-textarea--white"
129
- | "hds-textarea__label"
130
- | "hds-textarea__error-message"
117
+ | "hds-mt-small-1"
118
+ | "hds-mt-small-2"
119
+ | "hds-mt-small-3"
120
+ | "hds-mt-small-4"
121
+ | "hds-mt-medium-1"
122
+ | "hds-mt-medium-2"
123
+ | "hds-mt-medium-3"
124
+ | "hds-mt-medium-4"
125
+ | "hds-mt-large-1"
126
+ | "hds-mt-large-2"
127
+ | "hds-mt-large-3"
128
+ | "hds-mt-large-4"
129
+ | "hds-mt-small-1-responsive"
130
+ | "hds-mt-small-2-responsive"
131
+ | "hds-mt-small-3-responsive"
132
+ | "hds-mt-small-4-responsive"
133
+ | "hds-mt-medium-1-responsive"
134
+ | "hds-mt-medium-2-responsive"
135
+ | "hds-mt-medium-3-responsive"
136
+ | "hds-mt-medium-4-responsive"
137
+ | "hds-mt-large-1-responsive"
138
+ | "hds-mt-large-2-responsive"
139
+ | "hds-mt-large-3-responsive"
140
+ | "hds-mt-large-4-responsive"
131
141
  | "hds-typography-h1-display"
132
- | "hds-typography-h1-display--min"
133
- | "hds-typography-h1-display--max"
142
+ | "hds-typography--min"
143
+ | "hds-typography--max"
134
144
  | "hds-typography-h1"
135
- | "hds-typography-h1--min"
136
- | "hds-typography-h1--max"
137
145
  | "hds-typography-h2"
138
- | "hds-typography-h2--min"
139
- | "hds-typography-h2--max"
140
146
  | "hds-typography-h3"
141
- | "hds-typography-h3--min"
142
- | "hds-typography-h3--max"
143
147
  | "hds-typography-h3-title"
144
- | "hds-typography-h3-title--min"
145
- | "hds-typography-h3-title--max"
146
148
  | "hds-typography-body"
147
- | "hds-typography-body--min"
148
- | "hds-typography-body--max"
149
149
  | "hds-typography-body-title"
150
- | "hds-typography-body-title--min"
151
- | "hds-typography-body-title--max"
152
150
  | "hds-typography-body-small"
153
- | "hds-typography-body-small--min"
154
- | "hds-typography-body-small--max"
155
151
  | "hds-typography-body-small-title"
156
- | "hds-typography-body-small-title--min"
157
- | "hds-typography-body-small-title--max"
158
- | "hds-typography-caption"
159
- | "hds-typography-caption-title"
160
152
  | "hds-typography-technical"
161
- | "hds-typography-technical--min"
162
- | "hds-typography-technical--max"
163
153
  | "hds-typography-technical-title"
164
- | "hds-typography-technical-title--min"
165
- | "hds-typography-technical-title--max"
166
- | "hds-typography-h1--spacing"
167
- | "hds-typography-h2--spacing"
168
- | "hds-typography-h3--spacing"
169
- | "hds-typography-h3-title--spacing"
170
- | "hds-typography-body--spacing"
171
- | "hds-typography-body-title--spacing"
172
- | "hds-typography-body-small--spacing"
173
- | "hds-typography-body-small-title--spacing"
174
- | "hds-typography-caption--spacing"
175
- | "hds-typography-caption-title--spacing"
176
- | "hds-typography-technical--spacing"
177
- | "hds-typography-technical-title--spacing"
154
+ | "hds-typography-caption"
155
+ | "hds-typography-caption-title"
156
+ | "hds-typography--spacing"
178
157
  | "hds-warning-banner"
179
158
  | "hds-warning-banner__description"
180
159
  | "hds-warning-banner__title"
@@ -182,6 +161,19 @@ export type ClassNames =
182
161
  | "hds-warning-banner__title-trigger--icon"
183
162
  | "hds-warning-banner__title-trigger--icon-chevron"
184
163
  | "hds-warning-banner--closed"
185
- | "hds-prose"
186
- | "hds-prose--small"
187
- | "hds-prose--darkmode";
164
+ | "hds-error-message"
165
+ | "hds-fieldset"
166
+ | "hds-fieldset__legend"
167
+ | "hds-fieldset__legend--default"
168
+ | "hds-fieldset__legend--large"
169
+ | "hds-fieldset__input-wrapper"
170
+ | "hds-input"
171
+ | "hds-input-group__input"
172
+ | "hds-input-group"
173
+ | "hds-input-group--error"
174
+ | "hds-input-group__input-wrapper"
175
+ | "hds-input-group--default"
176
+ | "hds-input-group--white"
177
+ | "hds-input-group__label"
178
+ | "hds-select"
179
+ | "hds-textarea";
@@ -0,0 +1 @@
1
+ .hds-error-message{font:var(--hds-typography-caption-title);color:var(--hds-ui-colors-dark-grey);padding:var(--hds-spacing-small-1)0 0 var(--hds-spacing-medium-4)}.hds-error-message:empty{display:none}.hds-error-message:not(:empty){background-image:url("data:image/svg+xml,<svg fill=\"none\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\"><rect fill=\"black\" height=\"12\" rx=\"3\" width=\"6\" x=\"9\" y=\"7\" /><path d=\"M22.3552 18.4687C22.998 19.5938 22.1944 21 20.8685 21H3.7123C2.38641 21 1.58283 19.5938 2.22569 18.4687L10.8239 3.84375C11.4668 2.71875 13.1141 2.71875 13.7971 3.84375L22.3552 18.4687ZM11.3462 8.46429V13.6071C11.3462 14.1696 11.8284 14.5714 12.3105 14.5714C12.8328 14.5714 13.2748 14.1696 13.2748 13.6071V8.46429C13.2748 7.94196 12.8328 7.5 12.3105 7.5C11.748 7.5 11.3462 7.94196 11.3462 8.46429ZM12.3105 18.4286C12.9935 18.4286 13.556 17.8661 13.556 17.183C13.556 16.5 12.9935 15.9375 12.3105 15.9375C11.5873 15.9375 11.0248 16.5 11.0248 17.183C11.0248 17.8661 11.5873 18.4286 12.3105 18.4286Z\" fill=\"%23FDBB2F\" /></svg>");background-repeat:no-repeat;background-position-x:var(--hds-spacing-small-2);background-position-y:top}
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":null,"mappings":"AAAA,mKAME,sCAIA","sources":["home/runner/work/hedwig-design-system/hedwig-design-system/packages/css/src/form/error-message/error-message.css"],"sourcesContent":[".hds-error-message {\n font: var(--hds-typography-caption-title);\n color: var(--hds-ui-colors-dark-grey);\n padding: var(--hds-spacing-small-1) 0 0 var(--hds-spacing-medium-4);\n\n /* Avoid spacing when no errors are active, but keep the element always in DOM so `aria-live` works */\n &:empty {\n display: none;\n }\n\n &:not(:empty) {\n background-image: url('data:image/svg+xml,<svg fill=\"none\" height=\"24\" viewBox=\"0 0 24 24\" width=\"24\" xmlns=\"http://www.w3.org/2000/svg\"><rect fill=\"black\" height=\"12\" rx=\"3\" width=\"6\" x=\"9\" y=\"7\" /><path d=\"M22.3552 18.4687C22.998 19.5938 22.1944 21 20.8685 21H3.7123C2.38641 21 1.58283 19.5938 2.22569 18.4687L10.8239 3.84375C11.4668 2.71875 13.1141 2.71875 13.7971 3.84375L22.3552 18.4687ZM11.3462 8.46429V13.6071C11.3462 14.1696 11.8284 14.5714 12.3105 14.5714C12.8328 14.5714 13.2748 14.1696 13.2748 13.6071V8.46429C13.2748 7.94196 12.8328 7.5 12.3105 7.5C11.748 7.5 11.3462 7.94196 11.3462 8.46429ZM12.3105 18.4286C12.9935 18.4286 13.556 17.8661 13.556 17.183C13.556 16.5 12.9935 15.9375 12.3105 15.9375C11.5873 15.9375 11.0248 16.5 11.0248 17.183C11.0248 17.8661 11.5873 18.4286 12.3105 18.4286Z\" fill=\"%23FDBB2F\" /></svg>');\n background-repeat: no-repeat;\n background-position-x: var(--hds-spacing-small-2);\n background-position-y: top;\n }\n}\n"],"names":[]}
@@ -0,0 +1 @@
1
+ .hds-fieldset{gap:var(--hds-spacing-small-1);border:0;flex-flow:column;margin:0;padding:0;display:flex}.hds-fieldset:focus-within .hds-fieldset__legend{color:var(--hds-colors-darker)}.hds-fieldset .hds-fieldset__legend{margin-bottom:var(--hds-spacing-small-1);transition:color var(--hds-micro-animation-duration-quick)var(--hds-micro-animation-easing-normal);font:var(--hds-typography-caption);padding:0}.hds-fieldset .hds-fieldset__legend--default{margin-bottom:var(--hds-spacing-small-1);transition:color var(--hds-micro-animation-duration-quick)var(--hds-micro-animation-easing-normal);font:var(--hds-typography-caption);padding:0}.hds-fieldset .hds-fieldset__legend--large{font:var(--hds-typography-body-title)}.hds-fieldset .hds-fieldset__input-wrapper{opacity:1}
@@ -0,0 +1 @@
1
+ {"version":3,"sourceRoot":null,"mappings":"AAAA,uGAQE,gFAIA,6NAAA,sOASA,iFAIA","sources":["home/runner/work/hedwig-design-system/hedwig-design-system/packages/css/src/form/fieldset/fieldset.css"],"sourcesContent":[".hds-fieldset {\n display: flex;\n flex-flow: column nowrap;\n gap: var(--hds-spacing-small-1);\n border: 0;\n margin: 0;\n padding: 0;\n\n &:focus-within .hds-fieldset__legend {\n color: var(--hds-colors-darker);\n }\n\n & .hds-fieldset__legend,\n & .hds-fieldset__legend--default {\n padding: 0;\n margin-bottom: var(--hds-spacing-small-1);\n transition: color var(--hds-micro-animation-duration-quick)\n var(--hds-micro-animation-easing-normal);\n font: var(--hds-typography-caption);\n }\n\n & .hds-fieldset__legend--large {\n font: var(--hds-typography-body-title);\n }\n\n & .hds-fieldset__input-wrapper {\n opacity: 1; /* TODO do we need wrapper? Does it need styling? Adding this to make a valid, existing class for clsx() */\n }\n}\n"],"names":[]}