From 8a5e1dff0e6c93dd000a46739fd922088f637c54 Mon Sep 17 00:00:00 2001 From: James Schreffler Date: Tue, 30 Jan 2024 10:25:40 -0500 Subject: [PATCH] feat: updates of various flavors, but the build is still broken --- ...x => outline-core-styled-text.stories.mdx} | 5 +- .../outline-core-styled-text/packages.json | 4 +- .../src/.ck.ck-content.global.css | 4 +- .../src/.ck.ck-content.global.scoped.css | 46 ++ .../config/storybook.main.css | 700 +++++++++--------- 5 files changed, 401 insertions(+), 358 deletions(-) rename packages/components/outline-core-styled-text/docs/{outline-core-styled-text.mdx => outline-core-styled-text.stories.mdx} (99%) create mode 100644 packages/components/outline-core-styled-text/src/.ck.ck-content.global.scoped.css diff --git a/packages/components/outline-core-styled-text/docs/outline-core-styled-text.mdx b/packages/components/outline-core-styled-text/docs/outline-core-styled-text.stories.mdx similarity index 99% rename from packages/components/outline-core-styled-text/docs/outline-core-styled-text.mdx rename to packages/components/outline-core-styled-text/docs/outline-core-styled-text.stories.mdx index c0a424191..ed4899ac5 100644 --- a/packages/components/outline-core-styled-text/docs/outline-core-styled-text.mdx +++ b/packages/components/outline-core-styled-text/docs/outline-core-styled-text.stories.mdx @@ -1,6 +1,7 @@ import { html } from 'lit'; -import { Meta, Canvas, Story, Preview } from '@storybook/addon-docs'; -import '../src/outline-core-styled-text/outline-core-styled-text'; +import { Meta, Canvas, Story } from '@storybook/addon-docs'; +import { OutlineCoreStyledText } from '../src/outline-core-styled-text.js'; + ul,.ck.ck-content & > ol{margin-bottom:1.5em;padding-left:var(--spacing-05);}.ck.ck-content li{list-style-position:outside;padding-left:0.5em;margin-top:0.5em;margin-bottom:var(--spacing-02);font-size:var(--body-01-font-size);font-size:var(--outline-body-text--font-size, var(--body-01-font-size));}.ck.ck-content li::marker{color:var(--outline-accent-color);font-size:var(--fs-xl);}.ck.ck-content blockquote{display:flex;gap:var(--spacing-05);margin-top:1em;margin-bottom:1em;}.ck.ck-content blockquote p{font-size:var(--body-03-font-size);margin-bottom:0;}.ck.ck-content blockquote{font-weight:bold;}.ck.ck-content blockquote outline-icon{color:var(--color-primary-light);}.ck.ck-content hr{border-color:var(--outline-accent-color);margin-top:2em;margin-bottom:2em;}.ck.ck-content figcaption{font-size:var(--body-01-font-size);font-size:var(--outline-body-text--font-size, var(--body-01-font-size));color:var(--outline-text-color);text-align:center;}.ck.ck-content em{font-style:italic;}.ck.ck-content sup{vertical-align:super;font-size:60%;top:0;}.ck.ck-content sub{vertical-align:sub;font-size:60%;bottom:0;}.ck.ck-content strong{font-weight:700;}.ck.ck-content table{margin-bottom:var(--spacing-04);}.ck.ck-content .article-byline{font-size:var(--fs-lg);font-size:var(--body-article-byline, var(--fs-lg));}.ck.ck-content .disclaimer{--outline-link--text-color--hover:var(--color-neutral-white);--outline-link--bg-color--hover:var(--outline-text-color);--outline-cta--text-color:var(--outline-text-color);--outline-cta--text-color--hover:var(--color-neutral-white);--outline-cta--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23505050' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971 91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E");--outline-cta--icon--hover:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971 91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E");--outline-cta--icon-external:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23505050' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23505050' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");--outline-cta--icon-external--hover:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23ffffff' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23505050' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");--outline-button--bg-color:var(--outline-text-color);--outline-button--text-color:var(--color-neutral-white);--outline-button--border-color:var(--outline-text-color);--outline-button--bg-color--hover:transparent;--outline-button--text-color--hover:var(--outline-text-color);--outline-button--border-color--hover:var(--outline-text-color);--outline-button--icon-external:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");--outline-button--icon-external--hover:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 25'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23505050' fill-rule='evenodd' d='M20.25 15.824h-1.5a.739.739 0 0 0-.75.727v5.086H3V7.105h6.75c.414 0 .75-.325.75-.726V4.926a.739.739 0 0 0-.75-.727h-7.5C1.007 4.2 0 5.175 0 6.38v15.984c0 1.204 1.007 2.18 2.25 2.18h16.5c1.243 0 2.25-.976 2.25-2.18v-5.812a.739.739 0 0 0-.75-.727Zm2-14.531h-7.438c-.724 0-1.312.57-1.312 1.271v.85c.01.337.158.657.41.888.254.232.592.356.94.347L18 4.562 6.331 15.783l-.003.004a1.066 1.066 0 0 0 0 1.54L7.45 18.41l.003.003c.44.423 1.152.421 1.59-.004L20.625 7.105l-.088 3.052v.035c0 .703.588 1.272 1.312 1.272h.838c.725 0 1.313-.57 1.313-1.272V2.988c0-.936-.783-1.695-1.75-1.695Z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");font-size:calc(var(--body-helper-min-font-size));line-height:calc(var(--body-helper-min-line-height));display:block;margin-bottom:1em;}.ck.ck-content .disclaimer:last-child{margin-bottom:0;}.ck.ck-content .disclaimer a{font-weight:var(--fw-bold);text-decoration:underline;}.ck.ck-content .disclaimer a:hover,.ck.ck-content .disclaimer a:focus,.ck.ck-content .disclaimer a:focus-visible{color:var(--outline-link--text-color--hover);color:var( + --outline-disclaimer-link--text-color--hover, + var(--outline-link--text-color--hover) + );background-color:var(--outline-link--bg-color--hover);background-color:var( + --outline-disclaimer-link--bg-color--hover, + var(--outline-link--bg-color--hover) + );}.ck.ck-content .disclaimer a.outline-cta{font-size:inherit;color:var(--outline-cta--text-color);color:var( + --outline-disclaimer-cta--text-color, + var(--outline-cta--text-color) + );text-decoration:underline;}.ck.ck-content .disclaimer a.outline-cta .last-word{text-decoration:underline;}.ck.ck-content .disclaimer a.outline-cta .last-word::after{background-image:var(--outline-cta--icon);background-image:var( + --outline-disclaimer-cta--icon, + var(--outline-cta--icon) + );height:var(--spacing-03);width:var(--spacing-03);margin-left:calc(var(--spacing-02));}.ck.ck-content .disclaimer a.outline-cta:hover,.ck.ck-content .disclaimer a.outline-cta:focus-visible,.ck.ck-content .disclaimer a.outline-cta:focus{background-color:var(--outline-text-color);background-image:none;color:var(--outline-cta--text-color--hover);color:var( + --outline-disclaimer-cta--text-color--hover, + var(--outline-cta--text-color--hover) + );text-decoration:underline;}.ck.ck-content .disclaimer a.outline-cta:hover .last-word,.ck.ck-content .disclaimer a.outline-cta:focus-visible .last-word,.ck.ck-content .disclaimer a.outline-cta:focus .last-word{text-decoration:underline;}.ck.ck-content .disclaimer a.outline-cta:hover .last-word::after,.ck.ck-content .disclaimer a.outline-cta:focus-visible .last-word::after,.ck.ck-content .disclaimer a.outline-cta:focus .last-word::after{background-image:var(--outline-cta--icon--hover);background-image:var( + --outline-disclaimer-cta--icon--hover, + var(--outline-cta--icon--hover) + );transform:translateX(calc(var(--spacing-01)));}.ck.ck-content .disclaimer a.outline-cta.icon-external .last-word::after,.ck.ck-content .disclaimer a.outline-cta[target='_blank'] .last-word::after{background-image:var(--outline-cta--icon-external);background-image:var( + --outline-disclaimer-cta--icon-external, + var(--outline-cta--icon-external) + );height:var(--spacing-03);width:var(--spacing-03);}.ck.ck-content .disclaimer a.outline-cta.icon-external:hover .last-word::after,.ck.ck-content .disclaimer a.outline-cta.icon-external:focus-visible .last-word::after,.ck.ck-content .disclaimer a.outline-cta.icon-external:focus .last-word::after,.ck.ck-content .disclaimer a.outline-cta[target='_blank']:hover .last-word::after,.ck.ck-content .disclaimer a.outline-cta[target='_blank']:focus-visible .last-word::after,.ck.ck-content .disclaimer a.outline-cta[target='_blank']:focus .last-word::after{background-image:var(--outline-cta--icon-external--hover);background-image:var( + --outline-disclaimer-cta--icon-external--hover, + var(--outline-cta--icon-external--hover) + );transform:translateX(-2px) translateY(-1px);}.ck.ck-content .disclaimer a.btn{font-size:inherit;color:var(--outline-button--text-color);color:var( + --outline-disclaimer-button--text-color, + var(--outline-button--text-color) + );padding:var(--spacing-02) var(--spacing-04);min-height:0;text-decoration:none;}.ck.ck-content .disclaimer a.btn:hover{color:var(--outline-button--text-color--hover);color:var( + --outline-disclaimer-button--text-color--hover, + var(--outline-button--text-color--hover) + );background-color:var(--outline-button--bg-color--hover);background-color:var( + --outline-disclaimer-button--bg-color--hover, + var(--outline-button--bg-color--hover) + );border-color:var(--outline-button--border-color--hover);border-color:var( + --outline-disclaimer-button--border-color--hover, + var(--outline-button--border-color--hover) + );}.ck.ck-content .disclaimer a.btn.icon-external .last-word::after,.ck.ck-content .disclaimer a.btn[target='_blank'] .last-word::after{background-image:var(--outline-button--icon-external);background-image:var( + --outline-disclaimer-button--icon-external, + var(--outline-button--icon-external) + );height:var(--spacing-03);width:var(--spacing-03);margin-left:calc(var(--spacing-02));}.ck.ck-content .disclaimer a.btn.icon-external:hover .last-word::after,.ck.ck-content .disclaimer a.btn[target='_blank']:hover .last-word::after{background-image:var(--outline-button--icon-external--hover);background-image:var( + --outline-disclaimer-button--icon-external--hover, + var(--outline-button--icon-external--hover) + );}.ck.ck-content .disclaimer li{font-size:calc(var(--body-helper-min-font-size));line-height:calc(var(--body-helper-min-line-height));margin-top:var(--spacing-01);margin-bottom:var(--spacing-01);}.ck.ck-content .disclaimer li::marker{color:var(--outline-text-color);}.ck.ck-content ul.disclaimer li::marker{font-size:10px;}.ck.ck-content ol.disclaimer li::marker{font-size:0.9em;}.ck.ck-content a.outline-cta{white-space:initial;}.ck.ck-content a[name],.ck.ck-content a:not([href]){color:inherit;cursor:text;text-decoration:none;font-weight:inherit;font-size:inherit;}.ck.ck-content a[name]:hover,.ck.ck-content a[name]:focus,.ck.ck-content a[name]:focus-visible,.ck.ck-content a:not([href]):hover,.ck.ck-content a:not([href]):focus,.ck.ck-content a:not([href]):focus-visible{color:var(--outline-text-color);background-color:transparent;}.ck.ck-content .clear-left{clear:left;}.ck.ck-content .clear-right{clear:right;}.ck.ck-content .clear-both{clear:both;}.ck.ck-content{color:var(--outline-core-text-color);display:block;font-weight:unset;width:unset;}@media (min-width: 640px){.ck.ck-content{width:unset;}} \ No newline at end of file diff --git a/packages/documentation/outline-storybook/config/storybook.main.css b/packages/documentation/outline-storybook/config/storybook.main.css index 70c1d8ddd..1eb20ce1a 100644 --- a/packages/documentation/outline-storybook/config/storybook.main.css +++ b/packages/documentation/outline-storybook/config/storybook.main.css @@ -1,385 +1,381 @@ @import url('https://rsms.me/inter/inter.css'); -:root { - --brand-primary: #2563eb; - --brand-secondary: #059669; - --brand-tertiary: #dc2626; - --brand-quaternary: #d97706; - --brand-quinary: #9333ea; - --brand-senary: #db2777; - --brand-septenary: #4f46e5; - --brand-octonary: #525252; - --brand-nonary: #1e3a8a; - --brand-denary: #171717; - --status-success: #2f855a; - --status-warning: #b64301; - --status-error: #c53030; - --status-info: #1e3a8a; - --outline-phase2-blue: #0080ff; - --outline-karma-coral: #fa5c5c; - --outline-soft-black: #171717; - --outline-not-gray: #cfc7d4; - --outline-misty-teal: #73f2e5; - --outline-electric-violet: #9484ff; - --outline-dusty-blue: #7fc7ee; - --outline-transparent: transparent; - --outline-white: #fff; - --outline-black: #000; +:root{ + --brand-primary:#2563eb; + --brand-secondary:#059669; + --brand-tertiary:#dc2626; + --brand-quaternary:#d97706; + --brand-quinary:#9333ea; + --brand-senary:#db2777; + --brand-septenary:#4f46e5; + --brand-octonary:#525252; + --brand-nonary:#1e3a8a; + --brand-denary:#171717; + --status-success:#2f855a; + --status-warning:#b64301; + --status-error:#c53030; + --status-info:#1e3a8a; + --outline-phase2-blue:#0080ff; + --outline-karma-coral:#fa5c5c; + --outline-soft-black:#171717; + --outline-not-gray:#cfc7d4; + --outline-misty-teal:#73f2e5; + --outline-electric-violet:#9484ff; + --outline-dusty-blue:#7fc7ee; + --outline-transparent:transparent; + --outline-white:#fff; + --outline-black:#000; + + --outline-gray-50:#fafafa; + --outline-gray-100:#f5f5f5; + --outline-gray-200:#e5e5e5; + --outline-gray-300:#d4d4d4; + --outline-gray-400:#a3a3a3; + --outline-gray-500:#737373; + --outline-gray-600:#525252; + --outline-gray-700:#404040; + --outline-gray-800:#262626; + --outline-gray-900:#171717; - --outline-gray-50: #fafafa; - --outline-gray-100: #f5f5f5; - --outline-gray-200: #e5e5e5; - --outline-gray-300: #d4d4d4; - --outline-gray-400: #a3a3a3; - --outline-gray-500: #737373; - --outline-gray-600: #525252; - --outline-gray-700: #404040; - --outline-gray-800: #262626; - --outline-gray-900: #171717; + --outline-blue-50:#eff6ff; + --outline-blue-100:#dbeafe; + --outline-blue-200:#bfdbfe; + --outline-blue-300:#93c5fd; + --outline-blue-400:#60a5fa; + --outline-blue-500:#3b82f6; + --outline-blue-600:#2563eb; + --outline-blue-700:#1d4ed8; + --outline-blue-800:#1e40af; + --outline-blue-900:#1e3a8a; - --outline-blue-50: #eff6ff; - --outline-blue-100: #dbeafe; - --outline-blue-200: #bfdbfe; - --outline-blue-300: #93c5fd; - --outline-blue-400: #60a5fa; - --outline-blue-500: #3b82f6; - --outline-blue-600: #2563eb; - --outline-blue-700: #1d4ed8; - --outline-blue-800: #1e40af; - --outline-blue-900: #1e3a8a; + --red-50:#fef2f2; + --red-100:#fee2e2; + --red-200:#fecaca; + --red-300:#fca5a5; + --red-400:#f87171; + --red-500:#ef4444; + --red-600:#dc2626; + --red-700:#b91c1c; + --red-800:#991b1b; + --red-900:#7f1d1d; + --yellow-50:#fffbeb; + --yellow-100:#fef3c7; + --yellow-200:#fde68a; + --yellow-300:#fcd34d; + --yellow-400:#fbbf24; + --yellow-500:#f59e0b; + --yellow-600:#d97706; + --yellow-700:#b45309; + --yellow-800:#92400e; + --yellow-900:#78350f; + --green-50:#ecfdf5; + --green-100:#d1fae5; + --green-200:#a7f3d0; + --green-300:#6ee7b7; + --green-400:#34d399; + --green-500:#10b981; + --green-600:#059669; + --green-700:#047857; + --green-800:#065f46; + --green-900:#064e3b; + --indigo-50:#eef2ff; + --indigo-100:#e0e7ff; + --indigo-200:#c7d2fe; + --indigo-300:#a5b4fc; + --indigo-400:#818cf8; + --indigo-500:#6366f1; + --indigo-600:#4f46e5; + --indigo-700:#4338ca; + --indigo-800:#3730a3; + --indigo-900:#312e81; + --purple-50:#faf5ff; + --purple-100:#f3e8ff; + --purple-200:#e9d5ff; + --purple-300:#d8b4fe; + --purple-400:#c084fc; + --purple-500:#a855f7; + --purple-600:#9333ea; + --purple-700:#7e22ce; + --purple-800:#6b21a8; + --purple-900:#581c87; + --pink-50:#fdf2f8; + --pink-100:#fce7f3; + --pink-200:#fbcfe8; + --pink-300:#f9a8d4; + --pink-400:#f472b6; + --pink-500:#ec4899; + --pink-600:#db2777; + --pink-700:#be185d; + --pink-800:#9d174d; + --pink-900:#831843; + --screen-xs:480px; + --screen-sm:640px; + --screen-md:768px; + --screen-lg:1024px; + --screen-xl:1280px; + --screen-xxl:1440px; + --screen-xxxl:2180px; - --red-50: #fef2f2; - --red-100: #fee2e2; - --red-200: #fecaca; - --red-300: #fca5a5; - --red-400: #f87171; - --red-500: #ef4444; - --red-600: #dc2626; - --red-700: #b91c1c; - --red-800: #991b1b; - --red-900: #7f1d1d; - --yellow-50: #fffbeb; - --yellow-100: #fef3c7; - --yellow-200: #fde68a; - --yellow-300: #fcd34d; - --yellow-400: #fbbf24; - --yellow-500: #f59e0b; - --yellow-600: #d97706; - --yellow-700: #b45309; - --yellow-800: #92400e; - --yellow-900: #78350f; - --green-50: #ecfdf5; - --green-100: #d1fae5; - --green-200: #a7f3d0; - --green-300: #6ee7b7; - --green-400: #34d399; - --green-500: #10b981; - --green-600: #059669; - --green-700: #047857; - --green-800: #065f46; - --green-900: #064e3b; - --indigo-50: #eef2ff; - --indigo-100: #e0e7ff; - --indigo-200: #c7d2fe; - --indigo-300: #a5b4fc; - --indigo-400: #818cf8; - --indigo-500: #6366f1; - --indigo-600: #4f46e5; - --indigo-700: #4338ca; - --indigo-800: #3730a3; - --indigo-900: #312e81; - --purple-50: #faf5ff; - --purple-100: #f3e8ff; - --purple-200: #e9d5ff; - --purple-300: #d8b4fe; - --purple-400: #c084fc; - --purple-500: #a855f7; - --purple-600: #9333ea; - --purple-700: #7e22ce; - --purple-800: #6b21a8; - --purple-900: #581c87; - --pink-50: #fdf2f8; - --pink-100: #fce7f3; - --pink-200: #fbcfe8; - --pink-300: #f9a8d4; - --pink-400: #f472b6; - --pink-500: #ec4899; - --pink-600: #db2777; - --pink-700: #be185d; - --pink-800: #9d174d; - --pink-900: #831843; - --screen-xs: 480px; - --screen-sm: 640px; - --screen-md: 768px; - --screen-lg: 1024px; - --screen-xl: 1280px; - --screen-xxl: 1440px; - --screen-xxxl: 2180px; + --spacing-0:0px; + --spacing-1:0.25rem; + --spacing-2:0.5rem; + --spacing-3:0.75rem; + --spacing-4:1rem; + --spacing-5:1.25rem; + --spacing-6:1.5rem; + --spacing-7:1.75rem; + --spacing-8:2rem; + --spacing-9:2.25rem; + --spacing-10:2.5rem; + --spacing-11:2.75rem; + --spacing-12:3rem; + --spacing-14:3.5rem; + --spacing-16:4rem; + --spacing-20:5rem; + --spacing-24:6rem; + --spacing-28:7rem; + --spacing-32:8rem; + --spacing-36:9rem; + --spacing-40:10rem; + --spacing-44:11rem; + --spacing-48:12rem; + --spacing-52:13rem; + --spacing-56:14rem; + --spacing-60:15rem; + --spacing-64:16rem; + --spacing-72:18rem; + --spacing-80:20rem; + --spacing-96:24rem; + --spacing-px:1px; - --spacing-0: 0px; - --spacing-1: 0.25rem; - --spacing-2: 0.5rem; - --spacing-3: 0.75rem; - --spacing-4: 1rem; - --spacing-5: 1.25rem; - --spacing-6: 1.5rem; - --spacing-7: 1.75rem; - --spacing-8: 2rem; - --spacing-9: 2.25rem; - --spacing-10: 2.5rem; - --spacing-11: 2.75rem; - --spacing-12: 3rem; - --spacing-14: 3.5rem; - --spacing-16: 4rem; - --spacing-20: 5rem; - --spacing-24: 6rem; - --spacing-28: 7rem; - --spacing-32: 8rem; - --spacing-36: 9rem; - --spacing-40: 10rem; - --spacing-44: 11rem; - --spacing-48: 12rem; - --spacing-52: 13rem; - --spacing-56: 14rem; - --spacing-60: 15rem; - --spacing-64: 16rem; - --spacing-72: 18rem; - --spacing-80: 20rem; - --spacing-96: 24rem; - --spacing-px: 1px; + --fs-xs:0.75rem; + --fs-sm:0.875rem; + --fs-base:1rem; + --fs-lg:1.125rem; + --fs-xl:1.25rem; + --fs-2xl:1.5rem; + --fs-3xl:1.875rem; + --fs-4xl:2.25rem; + --fs-5xl:3.5rem; + --fs-6xl:4.5rem; + --fs-7xl:5.5rem; + --fs-8xl:6.5rem; + --fs-9xl:7.5rem; - --fs-xs: 0.75rem; - --fs-sm: 0.875rem; - --fs-base: 1rem; - --fs-lg: 1.125rem; - --fs-xl: 1.25rem; - --fs-2xl: 1.5rem; - --fs-3xl: 1.875rem; - --fs-4xl: 2.25rem; - --fs-5xl: 3.5rem; - --fs-6xl: 4.5rem; - --fs-7xl: 5.5rem; - --fs-8xl: 6.5rem; - --fs-9xl: 7.5rem; + --lh-xs:1rem; + --lh-sm:1.25rem; + --lh-base:1.5rem; + --lh-lg:1.75rem; + --lh-xl:1.75rem; + --lh-2xl:2rem; + --lh-3xl:2.25rem; + --lh-4xl:2.5rem; + --lh-5xl:3.75rem; + --lh-6xl:4.75rem; + --lh-7xl:5.75rem; + --lh-8xl:6.75rem; + --lh-9xl:7.75rem; - --lh-xs: 1rem; - --lh-sm: 1.25rem; - --lh-base: 1.5rem; - --lh-lg: 1.75rem; - --lh-xl: 1.75rem; - --lh-2xl: 2rem; - --lh-3xl: 2.25rem; - --lh-4xl: 2.5rem; - --lh-5xl: 3.75rem; - --lh-6xl: 4.75rem; - --lh-7xl: 5.75rem; - --lh-8xl: 6.75rem; - --lh-9xl: 7.75rem; + --ff-display:'Inter var', 'Helvetica', 'Arial', 'sans-serif'; + --ff-body:'Inter var', 'Helvetica', 'Arial', 'sans-serif'; + --ff-demo:'Inter var', 'Helvetica', 'Arial', 'sans-serif'; - --ff-display: 'Inter var', 'Helvetica', 'Arial', 'sans-serif'; - --ff-body: 'Inter var', 'Helvetica', 'Arial', 'sans-serif'; - --ff-demo: 'Inter var', 'Helvetica', 'Arial', 'sans-serif'; + --fw-thin:100; + --fw-extralight:200; + --fw-light:300; + --fw-normal:400; + --fw-medium:500; + --fw-semibold:600; + --fw-bold:700; + --fw-extrabold:800; + --fw-black:900; - --fw-thin: 100; - --fw-extralight: 200; - --fw-light: 300; - --fw-normal: 400; - --fw-medium: 500; - --fw-semibold: 600; - --fw-bold: 700; - --fw-extrabold: 800; - --fw-black: 900; + --fs-h1:4rem; + --fs-h1-medium:3rem; + --fs-h1-small:2.5rem; + + --lh-h1:3rem; + --lh-h1-medium:3.75rem; + --lh-h1-small:2rem; - --fs-h1: 4rem; - --fs-h1-medium: 3rem; - --fs-h1-small: 2.5rem; + --fs-h2:2.75rem; + --fs-h2-medium:2.5rem; + --fs-h2-small:2rem; + + --lh-h2:3.5rem; + --lh-h2-medium:3rem; + --lh-h2-small:2.5rem; + - --lh-h1: 3rem; - --lh-h1-medium: 3.75rem; - --lh-h1-small: 2rem; - - --fs-h2: 2.75rem; - --fs-h2-medium: 2.5rem; - --fs-h2-small: 2rem; - - --lh-h2: 3.5rem; - --lh-h2-medium: 3rem; - --lh-h2-small: 2.5rem; - - --fs-h3: 2rem; - --fs-h3-medium: 1.75rem; - --fs-h3-small: 1.5rem; - - --lh-h3: 2.25rem; - --lh-h3-medium: 2rem; - --lh-h3-small: 1.75rem; - - --fs-h4: 1.5rem; - --fs-h4-medium: 1.5rem; - --fs-h4-small: 1.375rem; - - --lh-h4: 2rem; - --lh-h4-medium: 1.75rem; - --lh-h4-small: 1.75rem; - - --fs-h5: 1.375rem; - --fs-h5-medium: 1.25rem; - --fs-h5-small: 1.125rem; - - --lh-h5: 1.75rem; - --lh-h5-medium: 1.5rem; - --lh-h5-small: 1.375rem; - - --fs-h6: 1.125rem; - --fs-h6-medium: 1.125rem; - --fs-h6-small: 1rem; - - --lh-h6: 1.5rem; - --lh-h6-medium: 1.375rem; - --lh-h6-small: 1.25rem; - --outline-ring-width: 2px; + --fs-h3:2rem; + --fs-h3-medium:1.75rem; + --fs-h3-small:1.5rem; + + --lh-h3:2.25rem; + --lh-h3-medium:2rem; + --lh-h3-small:1.75rem; + + --fs-h4:1.5rem; + --fs-h4-medium:1.5rem; + --fs-h4-small:1.375rem; + + --lh-h4:2rem; + --lh-h4-medium:1.75rem; + --lh-h4-small:1.75rem; + + --fs-h5:1.375rem; + --fs-h5-medium:1.25rem; + --fs-h5-small:1.125rem; + + --lh-h5:1.75rem; + --lh-h5-medium:1.5rem; + --lh-h5-small:1.375rem; + + --fs-h6:1.125rem; + --fs-h6-medium:1.125rem; + --fs-h6-small:1rem; + + --lh-h6:1.5rem; + --lh-h6-medium:1.375rem; + --lh-h6-small:1.25rem; + --outline-ring-width:2px; --outline-ring-inset: ; - --outline-ring-offset-width: 2px; - --outline-ring-offset-color: var(--outline-gray-100); - --outline-ring-color: var(--outline-soft-black); - --outline-ring-offset-shadow: var(--outline-ring-inset) 0 0 0 - var(--outline-ring-offset-width) var(--outline-ring-offset-color); - --outline-ring-shadow: var(--outline-ring-inset) 0 0 0 - calc(var(--outline-ring-width) + var(--outline-ring-offset-width)) - var(--outline-ring-color); + --outline-ring-offset-width:2px; + --outline-ring-offset-color:var(--outline-gray-100); + --outline-ring-color:var(--outline-soft-black); + --outline-ring-offset-shadow:var(--outline-ring-inset) 0 0 0 var(--outline-ring-offset-width) var(--outline-ring-offset-color); + --outline-ring-shadow:var(--outline-ring-inset) 0 0 0 calc(var(--outline-ring-width) + var(--outline-ring-offset-width)) var(--outline-ring-color); + + --outline-shadow:0 0 rgba(0, 0, 0, 0); + --outline-shadow-colored:0 0 rgba(0, 0, 0, 0); - --outline-shadow: 0 0 rgba(0, 0, 0, 0); - --outline-shadow-colored: 0 0 rgba(0, 0, 0, 0); } /* ! tailwindcss v3.0.0 | MIT License | https://tailwindcss.com */ *, ::before, -::after { - box-sizing: border-box; - border-width: 0; - border-style: solid; - border-color: currentColor; +::after{ + box-sizing:border-box; + border-width:0; + border-style:solid; + border-color:currentColor; } ::before, -::after { - --tw-content: ''; -} -html { - line-height: 1.5; - -webkit-text-size-adjust: 100%; - tab-size: 4; - font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, - 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, - 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; -} -body { - margin: 0; - line-height: inherit; -} -hr { - height: 0; - color: inherit; - border-top-width: 1px; -} -abbr[title] { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; +::after{ + --tw-content:''; +} +html{ + line-height:1.5; + -webkit-text-size-adjust:100%; + tab-size:4; + font-family:ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; +} +body{ + margin:0; + line-height:inherit; +} +hr{ + height:0; + color:inherit; + border-top-width:1px; +} +abbr[title]{ + -webkit-text-decoration:underline dotted; + text-decoration:underline dotted; } h1, h2, h3, h4, h5, -h6 { - font-size: inherit; - font-weight: inherit; +h6{ + font-size:inherit; + font-weight:inherit; } -a { - color: inherit; - text-decoration: inherit; +a{ + color:inherit; + text-decoration:inherit; } b, -strong { - font-weight: bolder; +strong{ + font-weight:bolder; } code, kbd, samp, -pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, - 'Liberation Mono', 'Courier New', monospace; - font-size: 1em; +pre{ + font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-size:1em; } -small { - font-size: 80%; +small{ + font-size:80%; } sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; +sup{ + font-size:75%; + line-height:0; + position:relative; + vertical-align:baseline; } -sub { - bottom: -0.25em; +sub{ + bottom:-0.25em; } -sup { - top: -0.5em; +sup{ + top:-0.5em; } -table { - text-indent: 0; - border-color: inherit; - border-collapse: collapse; +table{ + text-indent:0; + border-color:inherit; + border-collapse:collapse; } button, input, optgroup, select, -textarea { - font-family: inherit; - font-size: 100%; - line-height: inherit; - color: inherit; - margin: 0; - padding: 0; +textarea{ + font-family:inherit; + font-size:100%; + line-height:inherit; + color:inherit; + margin:0; + padding:0; } button, -select { - text-transform: none; +select{ + text-transform:none; } button, [type='button'], [type='reset'], -[type='submit'] { - -webkit-appearance: button; - background-color: transparent; - background-image: none; +[type='submit']{ + -webkit-appearance:button; + background-color:transparent; + background-image:none; } -:-moz-focusring { - outline: auto; +:-moz-focusring{ + outline:auto; } -:-moz-ui-invalid { - box-shadow: none; +:-moz-ui-invalid{ + box-shadow:none; } -progress { - vertical-align: baseline; +progress{ + vertical-align:baseline; } ::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; +::-webkit-outer-spin-button{ + height:auto; } -[type='search'] { - -webkit-appearance: textfield; - outline-offset: -2px; +[type='search']{ + -webkit-appearance:textfield; + outline-offset:-2px; } -::-webkit-search-decoration { - -webkit-appearance: none; +::-webkit-search-decoration{ + -webkit-appearance:none; } -::-webkit-file-upload-button { - -webkit-appearance: button; - font: inherit; +::-webkit-file-upload-button{ + -webkit-appearance:button; + font:inherit; } -summary { - display: list-item; +summary{ + display:list-item; } blockquote, dl, @@ -393,37 +389,37 @@ h6, hr, figure, p, -pre { - margin: 0; +pre{ + margin:0; } -fieldset { - margin: 0; - padding: 0; +fieldset{ + margin:0; + padding:0; } -legend { - padding: 0; +legend{ + padding:0; } ol, ul, -menu { - list-style: none; - margin: 0; - padding: 0; +menu{ + list-style:none; + margin:0; + padding:0; } -textarea { - resize: vertical; +textarea{ + resize:vertical; } input::placeholder, -textarea::placeholder { - opacity: 1; - color: #9ca3af; +textarea::placeholder{ + opacity:1; + color:#9ca3af; } button, -[role='button'] { - cursor: pointer; +[role="button"]{ + cursor:pointer; } -:disabled { - cursor: default; +:disabled{ + cursor:default; } img, svg, @@ -432,15 +428,15 @@ canvas, audio, iframe, embed, -object { - display: block; - vertical-align: middle; +object{ + display:block; + vertical-align:middle; } img, -video { - max-width: 100%; - height: auto; +video{ + max-width:100%; + height:auto; } -[hidden] { - display: none; +[hidden]{ + display:none; }