UNPKG

@postenbring/hedwig-css

Version:

Styles for [Hedwig Design System](https://github.com/bring/hedwig-design-system).

github.com/bring/hedwig-design-system

bring/hedwig-design-system

1 lines • 11.1 kB
1
{"version":3,"sourceRoot":null,"mappings":"AEKA,6fAcE,yBAAkB,ggBA4BpB,0CAIA,0CAIA,4CAIA,4CAIA,4CAIA,4CAIA,4CAIA,4CAIA,4CAIA,4CAIA,4CAIA,8CAIA,8CAKA,8CAIA,gDAIA,kDAIA,kDAIA,kDAIA,kDAIA,kDAIA,kDAIA,kDAIA,kDAIA,oDAIA,sDAKA,6CAIA,6CAIA,+CAIA,+CAIA,+CAIA,+CAIA,+CAIA,+CAIA,+CAIA,+CAIA,+CAIA,iDAIA,iDAKA,iDAIA,mDAIA,qDAIA,qDAIA,qDAIA,qDAIA,qDAIA,qDAIA,qDAIA,qDAIA,uDAIA,yDFnPA,iDAQE,2CAIA,6CAOA,wDAAA,wDAKA,wDAIA,wDAAA,wDA3BF,2gBAYE,yOAAA,0OAWA,4MAIE,0FAIA,+NAUF,kIAIE,sNAMF,yHAIE,gIAAA,iIAQF,gIAIE,oHASF,kGAIA,0FAIA,qGAQA,sJAAA,uJASA,yFAIA,yFAOA,yFAME,mIAhFF,oDAGE,yBAAkB,qDAMpB,0DAAA,8DAKA,0DAIA,0DAAA,0DAMA,wDA7DF,2IAUE,6FAGE,uGAKF,kFAIA,kFAGE,yFAMF,uHAMA,wHAaA,wFAKE,4FAIA,2FAAA,2FATF,0GAKE,8GAIA,6GAAA,6GATF,yGAKE,6GAIA,4GAAA,4GAMF,8GAGE,4GAIA,2GAAA,2GAMF,iHAGE,gHAIA,+GAAA,+GAMF,sGAGE,6GAIA,4GAAA,4GASF,2GAIE,iHAIA,8FApHJ,okBAYE,kSAAA,mSAWA,qQAIE,mJAIA,wRAUF,2LAIE,+QAMF,kLAIE,yLAAA,0LAQF,yLAIE,6KASF,2JAIA,mJAIA,8JAQA,+MAAA,gNASA,kJAIA,kJAOA,kJAME,4LAhDW,yFApEb,gFAKA,iEAGE,gOAgBF,8LAmDS,4EA/EX,gGAKE,oEAIA,sFAKA,kFAME,+GAKA,2GAOA,uDAIW,4GApCf,6GASE,8GAAA,8GAKA,wEAAA,wEAKA,wEAAA,wEAWE,iGAAA,iGAMA,sEAIA,gEAVA,oHAAA,oHAMA,yFAIA,mFAMA,sHAAA,sHAMA,2FAIA,qFAKF,6BAEI,6HAAA,6HAMA,kGAIA,6FAOJ,yIAaa,wDAEX,yCAAA,0CAAA,0CAAA,0CAAA,0CAAA,0CAAA,0CAUA,wDAMF,iEAAA,sEAWE,gIAAA,kIAAA,mIAAA,kIAQA,2EAMF,sDAOE,4DAAA,4DAAA,4DAAA,4DAAA,4DAAA,4DAtHF,0LAIE,wEAIA","sources":["home/runner/work/hedwig-design-system/hedwig-design-system/packages/css/src/styled-html/styled-html.css","home/runner/work/hedwig-design-system/hedwig-design-system/packages/css/src/styled-html/../_custom-media.css","home/runner/work/hedwig-design-system/hedwig-design-system/packages/css/src/styled-html/../spacing/spacing.css","home/runner/work/hedwig-design-system/hedwig-design-system/packages/css/src/styled-html/../spacing/../_custom-media.css"],"sourcesContent":["@import url(\"../_custom-media.css\");\n@import url(\"../spacing/spacing.css\");\n\n.hds-styled-html {\n font: var(--hds-typography-body);\n\n /**\n * Avoid top margin on first element and bottom margin on last element\n * The consumer should set their own spacing to of the styled html relative to the rest of the page\n * This component only cares about internal spacing\n */\n & > :first-child {\n margin-top: 0;\n }\n\n & > :last-child {\n margin-bottom: 0;\n }\n\n /* Headings\n * h1-h6 gets styled globally in `body.css` \n */\n & h1,\n & h2 {\n margin-top: var(--hds-spacing-48-64);\n }\n\n & h3 {\n margin-top: var(--hds-spacing-40-48);\n }\n\n & h4,\n & h5 {\n margin-top: var(--hds-spacing-32-40);\n }\n\n /* Link */\n a:where(:not(.hds-button)) {\n @extend url(\"./src/link/link.css:hds-link\");\n }\n\n /* Paragraphs */\n & p {\n margin-top: var(--hds-spacing-16);\n\n @media (--large) {\n margin-top: var(--hds-spacing-24);\n }\n }\n\n /* Combinations */\n & p + h2,\n & p + figure {\n margin-top: var(--hds-spacing-48-64);\n }\n\n & p + h3 {\n margin-top: var(--hds-spacing-40-48);\n }\n\n & p + h4,\n & p + h5 {\n margin-top: var(--hds-spacing-32-40);\n }\n\n /* Divider */\n & hr {\n margin-bottom: var(--hds-spacing-24);\n }\n\n /* List */\n & :is(ul, ol):where(:not(.hds-accordion)) {\n @extend url(\"./src/list/list.css:hds-list\");\n\n margin-top: var(--hds-spacing-16);\n }\n\n /* Image */\n & figure {\n @extend url(\"./src/figure/figure.css:hds-figure\");\n\n margin: 0;\n padding: 0;\n margin-top: var(--hds-spacing-32);\n }\n\n /* Blockquote */\n & blockquote {\n @extend url(\"./src/blockquote/blockquote.css:hds-blockquote\");\n }\n\n /* Table */\n & table {\n @extend url(\"./src/table/table.css:hds-table\");\n\n margin-top: var(--hds-spacing-32);\n\n & p,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n margin-bottom: 0;\n }\n\n & a {\n border-bottom: none;\n color: unset;\n }\n }\n\n b,\n strong {\n font-weight: var(--hds-font-weight-body-title);\n }\n\n /**\n * Modifiers\n */\n\n /* Small version */\n &.hds-styled-html--small {\n &,\n & p,\n & li,\n & a {\n font-size: var(--hds-font-size-body-small);\n line-height: var(--hds-line-height-body-small);\n }\n\n & p {\n margin-top: var(--hds-spacing-12);\n }\n }\n\n /* 🚧 Dark mode */\n &.hds-styled-html--darkmode {\n /* TODO: Do we want the background to be set? */\n\n /* background-color: var(--hds-dark-mode-colors-obsidian); */\n\n color: #ccc;\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n color: #fafafa;\n }\n\n & a {\n @extend url(\"./src/link/link.css:hds-link--inverted\");\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","@import url(\"../_custom-media.css\");\n\n/**\n * Responsive extension of the spacing css variables\n */\n:root {\n --hds-spacing-4-8: var(--hds-spacing-4);\n --hds-spacing-8-12: var(--hds-spacing-8);\n --hds-spacing-12-16: var(--hds-spacing-12);\n --hds-spacing-16-20: var(--hds-spacing-16);\n --hds-spacing-20-24: var(--hds-spacing-20);\n --hds-spacing-24-32: var(--hds-spacing-24);\n --hds-spacing-32-40: var(--hds-spacing-32);\n --hds-spacing-40-48: var(--hds-spacing-40);\n --hds-spacing-48-64: var(--hds-spacing-48);\n --hds-spacing-64-80: var(--hds-spacing-64);\n --hds-spacing-80-120: var(--hds-spacing-80);\n --hds-spacing-120-160: var(--hds-spacing-120);\n\n @media (--large) {\n --hds-spacing-4-8: var(--hds-spacing-8);\n --hds-spacing-8-12: var(--hds-spacing-12);\n --hds-spacing-12-16: var(--hds-spacing-16);\n --hds-spacing-16-20: var(--hds-spacing-20);\n --hds-spacing-20-24: var(--hds-spacing-24);\n --hds-spacing-24-32: var(--hds-spacing-32);\n --hds-spacing-32-40: var(--hds-spacing-40);\n --hds-spacing-40-48: var(--hds-spacing-48);\n --hds-spacing-48-64: var(--hds-spacing-64);\n --hds-spacing-64-80: var(--hds-spacing-80);\n --hds-spacing-80-120: var(--hds-spacing-120);\n --hds-spacing-120-160: var(--hds-spacing-160);\n }\n}\n\n/**\n * Utility classes for margin top and bottom\n * Based upon [tailwind](https://tailwindcss.com/docs/margin)\n * \n * We start of by just adding the margin top and bottom classes.\n * we will see if there becomes a need for left and right. X, Y axis, padding etc...\n *\n * If the consumer wish to primarly use utility classes, the recommended approach is to use tailwind with the\n * provided tailwind configuration file.\n */\n\n/* Margin top */\n.hds-mt-4 {\n margin-top: var(--hds-spacing-4);\n}\n\n.hds-mt-8 {\n margin-top: var(--hds-spacing-8);\n}\n\n.hds-mt-12 {\n margin-top: var(--hds-spacing-12);\n}\n\n.hds-mt-16 {\n margin-top: var(--hds-spacing-16);\n}\n\n.hds-mt-20 {\n margin-top: var(--hds-spacing-20);\n}\n\n.hds-mt-24 {\n margin-top: var(--hds-spacing-24);\n}\n\n.hds-mt-32 {\n margin-top: var(--hds-spacing-32);\n}\n\n.hds-mt-40 {\n margin-top: var(--hds-spacing-40);\n}\n\n.hds-mt-48 {\n margin-top: var(--hds-spacing-48);\n}\n\n.hds-mt-64 {\n margin-top: var(--hds-spacing-64);\n}\n\n.hds-mt-80 {\n margin-top: var(--hds-spacing-80);\n}\n\n.hds-mt-120 {\n margin-top: var(--hds-spacing-120);\n}\n\n.hds-mt-160 {\n margin-top: var(--hds-spacing-160);\n}\n\n/* Responsive margin top. Mobile first, meaning it jumps up on larger screens */\n.hds-mt-4-8 {\n margin-top: var(--hds-spacing-4-8);\n}\n\n.hds-mt-8-12 {\n margin-top: var(--hds-spacing-8-12);\n}\n\n.hds-mt-12-16 {\n margin-top: var(--hds-spacing-12-16);\n}\n\n.hds-mt-16-20 {\n margin-top: var(--hds-spacing-16-20);\n}\n\n.hds-mt-20-24 {\n margin-top: var(--hds-spacing-20-24);\n}\n\n.hds-mt-24-32 {\n margin-top: var(--hds-spacing-24-32);\n}\n\n.hds-mt-32-40 {\n margin-top: var(--hds-spacing-32-40);\n}\n\n.hds-mt-40-48 {\n margin-top: var(--hds-spacing-40-48);\n}\n\n.hds-mt-48-64 {\n margin-top: var(--hds-spacing-48-64);\n}\n\n.hds-mt-64-80 {\n margin-top: var(--hds-spacing-64-80);\n}\n\n.hds-mt-80-120 {\n margin-top: var(--hds-spacing-80-120);\n}\n\n.hds-mt-120-160 {\n margin-top: var(--hds-spacing-120-160);\n}\n\n/* Margin bottom */\n.hds-mb-4 {\n margin-bottom: var(--hds-spacing-4);\n}\n\n.hds-mb-8 {\n margin-bottom: var(--hds-spacing-8);\n}\n\n.hds-mb-12 {\n margin-bottom: var(--hds-spacing-12);\n}\n\n.hds-mb-16 {\n margin-bottom: var(--hds-spacing-16);\n}\n\n.hds-mb-20 {\n margin-bottom: var(--hds-spacing-20);\n}\n\n.hds-mb-24 {\n margin-bottom: var(--hds-spacing-24);\n}\n\n.hds-mb-32 {\n margin-bottom: var(--hds-spacing-32);\n}\n\n.hds-mb-40 {\n margin-bottom: var(--hds-spacing-40);\n}\n\n.hds-mb-48 {\n margin-bottom: var(--hds-spacing-48);\n}\n\n.hds-mb-64 {\n margin-bottom: var(--hds-spacing-64);\n}\n\n.hds-mb-80 {\n margin-bottom: var(--hds-spacing-80);\n}\n\n.hds-mb-120 {\n margin-bottom: var(--hds-spacing-120);\n}\n\n.hds-mb-160 {\n margin-bottom: var(--hds-spacing-160);\n}\n\n/* Responsive margin bottom. Mobile first, meaning it jumps up on larger screens */\n.hds-mb-4-8 {\n margin-bottom: var(--hds-spacing-4-8);\n}\n\n.hds-mb-8-12 {\n margin-bottom: var(--hds-spacing-8-12);\n}\n\n.hds-mb-12-16 {\n margin-bottom: var(--hds-spacing-12-16);\n}\n\n.hds-mb-16-20 {\n margin-bottom: var(--hds-spacing-16-20);\n}\n\n.hds-mb-20-24 {\n margin-bottom: var(--hds-spacing-20-24);\n}\n\n.hds-mb-24-32 {\n margin-bottom: var(--hds-spacing-24-32);\n}\n\n.hds-mb-32-40 {\n margin-bottom: var(--hds-spacing-32-40);\n}\n\n.hds-mb-40-48 {\n margin-bottom: var(--hds-spacing-40-48);\n}\n\n.hds-mb-48-64 {\n margin-bottom: var(--hds-spacing-48-64);\n}\n\n.hds-mb-64-80 {\n margin-bottom: var(--hds-spacing-64-80);\n}\n\n.hds-mb-80-120 {\n margin-bottom: var(--hds-spacing-80-120);\n}\n\n.hds-mb-120-160 {\n margin-bottom: var(--hds-spacing-120-160);\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":[]}