import { css } from '@lit'
export default {
reset: css`
*,
:before,
:after {
box-sizing: border-box;
border-style: solid;
border-width: 0;
border-color: rgb(var(--border-color));
}
a {
text-decoration: none;
color: unset;
}
ul,
ol {
list-style: none;
margin: 0;
padding: 0;
}
button {
padding: 0;
border: none;
background: none;
outline: none;
box-shadow: none;
text-shadow: none;
cursor: pointer;
font-family: inherit;
font-size: inherit;
color: inherit;
text-align: center;
line-height: normal;
text-decoration: none;
vertical-align: middle;
white-space: normal;
word-wrap: normal;
-webkit-appearance: none;
-moz-appearance: none;
user-select: none;
}
`,
sizing: css`
.w100 {
width: 100%;
}
.w50 {
width: 50%;
}
.w25 {
width: 25%;
}
`,
container: css`
.container {
width: 100%;
max-width: 1440px;
margin: 0 auto;
box-sizing: border-box;
padding: 0 var(--dna-container-horizontal-padding);
}
.container--fluid {
max-width: 100%;
padding: 0 var(--dna-container-horizontal-padding);
}
.container-inset {
margin: var(--dna-container-horizontal-padding);
}
`,
a11y: css`
.sr-only {
width: 1px;
height: 1px;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
margin: -1px;
padding: 0;
position: absolute;
overflow: hidden;
}
[hidden],
.hidden {
display: none !important;
}
.invisible {
visibility: hidden;
}
.no-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
display: none;
}
`,
flex: css`
.flex {
display: flex;
}
.flex-column {
flex-direction: column;
}
.wrap {
flex-wrap: wrap;
}
.gap05 {
gap: 0.5em;
}
.gap1 {
gap: 1em;
}
.flex-justify-center {
justify-content: center;
}
.flex-space-between {
justify-content: space-between;
}
.flex-align-center {
align-items: center;
}
`,
grid: css`
.grid {
display: grid;
}
.gap1 {
gap: 1em;
}
`,
typography: css`
html {
font-size: 100%;
}
body,
.body,
.p,
button {
font: var(--dna-body-font);
letter-spacing: 0.5px;
}
.h1 {
font: var(--dna-h1-font);
letter-spacing: 0;
}
.h2 {
font: var(--dna-h2-font);
letter-spacing: 0;
}
.h3 {
font: var(--dna-h3-font);
letter-spacing: 0;
}
.h4 {
font: var(--dna-h4-font);
letter-spacing: 0;
}
.h5 {
font: var(--dna-h5-font);
letter-spacing: 0;
}
.h6 {
font: var(--dna-h6-font);
letter-spacing: 0;
}
.p1 {
font: var(--dna-body-p1-font);
}
.p2 {
font: var(--dna-body-p2-font);
}
.p3 {
font: var(--dna-body-p3-font);
}
.p4 {
font: var(--dna-body-p4-font);
}
strong,
.strong {
font-family: var(--dna-font-sans-medium);
font-weight: 500;
}
.link-1 {
font: var(--dna-link-1-font);
text-decoration: underline;
}
.link-2 {
font: var(--dna-link-2-font);
text-decoration: underline;
}
.link-3 {
font: var(--dna-link-3-font);
text-decoration: underline;
}
.label-l {
font: var(--dna-label-l-font);
letter-spacing: 2px;
}
.label-m {
font: var(--dna-label-m-font);
letter-spacing: 2px;
}
.label-s {
font: var(--dna-label-s-font);
letter-spacing: 2px;
}
.badge {
font: var(--dna-badge-font);
letter-spacing: 2px;
}
.left {
text-align: left;
}
.center {
text-align: center;
}
.right {
text-align: right;
}
.uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
.capitalize {
text-transform: capitalize;
}
.light {
opacity: 0.7;
}
.break {
word-break: break-word;
}
.underline {
text-decoration: underline;
}
`,
color: css`
.bg-midnight {
background-color: var(--dna-color-midnight);
}
.bg-sandstone {
background-color: var(--dna-color-sandstone);
}
.bg-white {
background-color: var(--dna-brand-reverse);
}
.c-midnight {
color: var(--dna-color-midnight);
}
.c-white {
color: var(--dna-brand-reverse);
}
.c-reflex-blue {
color: var(--dna-color-reflex-blue);
}
.c-disabled {
color: var(--dna-utility-disabled);
}
`,
position: css`
.relative {
position: relative;
}
`,
skeleton: css`
.product-card {
background-color: var(--dna-color-sandstone);
color: var(--dna-color-midnight);
border: 1px solid #03143B40;
border-top: 0;
border-left: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
flex: 1 0 25%;
}
.skeleton {
display: block;
overflow: hidden;
position: relative;
}
.skeleton::after {
animation: shimmer 3s infinite;
background-image: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0,
rgba(255, 255, 255, 0.2) 20%,
rgba(255, 255, 255, 1) 60%,
rgba(255, 255, 255, 0)
);
bottom: 0;
content: '';
height: 120%;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: -10%;
transform: translateX(-100%);
}
.skeleton--image {
aspect-ratio: 1;
width: 100%;
}
.skeleton--text {
height: 1em;
}
@keyframes shimmer {
100% {
transform: translateX(100%);
}
}
.skeleton--small-text {
height: 60px;
}
.skeleton--small-text:last-child {
height: 74px;
}
.skeleton--thumbnail {
aspect-ratio: 1/1;
margin-bottom: 60px;
}
.skeleton--heading {
border-radius: 26px;
height: 26px;
width: 100%;
max-width: 200px;
}
/* breakpoint-desktop */
@media screen and (max-width: 1024px) {
.skeleton--small-text {
height: 32px;
}
.skeleton--small-text:last-child {
height: 80px;
}
.skeleton--thumbnail {
margin-bottom: 32px;
}
}
`,
spacing: css`
.mt-2,
.my-2,
.m-2 {
margin-top: var(--dna-space-2);
}
.mr-2,
.mx-2,
.m-2 {
margin-right: var(--dna-space-2);
}
.pl-2,
.px-2,
.p-2 {
padding-left: var(--dna-space-2);
}
`,
spinner: css`
.spinner {
width: 24px;
height: 24px;
}
.spinner__dual-ring {
display: inline-block;
width: 20px;
height: 20px;
}
.spinner__dual-ring:after {
content: ' ';
display: block;
width: 16px;
height: 16px;
margin: 2px;
border-radius: 50%;
border: 2px solid rgba(0, 0, 0, 0.5);
border-color: rgba(0, 0, 0, 0.5) transparent rgba(0, 0, 0, 0.5)
transparent;
animation: dual-ring 1.2s linear infinite;
}
@keyframes dual-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
`,
shoelace: css`
sl-button[disabled] {
cursor: not-allowed;
}
sl-button[disabled]::part(base) {
pointer-events: none;
}
sl-button::part(base) {
border-radius: var(--dna-border-radius-s);
transition: 0.15s;
border-radius: 0;
font-family: var(--dna-font-sans);
font-weight: 500;
font-size: 16px;
line-height: 1;
text-transform: uppercase;
letter-spacing: 2px;
padding: 18.5px 24px;
}
sl-button::part(base):focus {
outline: 2px solid var(--dna-utility-focus);
}
sl-button[variant='default']::part(base) {
background-color: var(--dna-brand-reverse);
color: var(--dna-color-midnight);
border: 1px solid var(--dna-brand-reverse);
}
sl-button[variant='default']::part(base):hover {
color: var(--dna-brand-reverse);
background-color: transparent;
}
sl-button[variant='primary']::part(base) {
background-color: var(--dna-color-midnight);
color: var(--dna-brand-reverse);
border: 1px solid var(--dna-color-midnight);
}
sl-button[variant='primary']::part(base):hover {
color: var(--dna-color-midnight);
background-color: transparent;
}
sl-button[disabled]::part(base):hover {
opacity: 0.4;
}
sl-button[variant='secondary']::part(base) {
background-color: transparent;
color: var(--dna-color-midnight);
border: 1px solid var(--dna-color-midnight);
}
sl-button[variant='secondary']::part(base):hover {
background-color: var(--dna-color-midnight);
color: var(--dna-brand-reverse);
}
sl-button[variant='underline']::part(base) {
position: relative;
padding: 0;
border: none;
background-color: transparent;
color: currentColor;
min-height: auto;
}
sl-button[variant='underline']::part(label) {
height: auto;
padding: 0;
font: var(--dna-label-s-font);
font-size: 16px;
}
sl-button[variant='underline'][large]::part(label) {
height: auto;
padding: 0;
font-size: 24px;
}
sl-button[variant='underline']::part(label)::after {
content: '';
position: absolute;
left: 0;
background-color: currentColor;
bottom: -12px;
width: 100%;
height: 5px;
mask: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: 0 0;
transition: background-size 0.3s ease, transform 0.3s ease;
}
sl-button[variant='underline'] {
padding-bottom: var(--dna-space-4);
}
sl-button[variant='underline']:not([disabled]):hover::part(label)::after {
transform: translateY(4px);
}
sl-button[variant='arrow']::part(base) {
position: relative;
padding: 0;
border: none;
background-color: transparent;
color: currentColor;
min-height: auto;
}
sl-button[variant='arrow']::part(label) {
height: auto;
padding: 0;
position: relative;
text-decoration: none;
color: currentColor;
padding-right: calc(56px + 16px);
font-size: 16px;
font-weight: 500;
line-height: 16px;
letter-spacing: 2px;
text-align: left;
text-transform: uppercase;
}
sl-button[variant='arrow']::part(label)::after {
content: '';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 56px;
height: 16px;
background-color: currentColor;
mask: url('data:image/svg+xml,')
no-repeat 50% 50%;
background-repeat: no-repeat;
background-size: contain;
transition: transform 0.3s ease;
}
sl-button[variant='arrow']::part(label):hover::after {
transform: translateY(-50%) translateX(4px);
}
sl-button.primary-hover[variant='secondary']::part(base):hover {
background-color: var(--dna-color-midnight);
border-color: var(--dna-color-midnight);
}
sl-details.details-dropdown::part(summary-icon) {
/* Disable the expand/collapse animation */
rotate: none;
}
sl-details.details-dropdown::part(header) {
height: 40px;
padding-bottom: 0;
padding-top: 0;
}
sl-details.details-dropdown::part(content) {
background-color: var(--sl-color-neutral-0);
position: absolute;
}
sl-card::part(base) {
border: none;
box-shadow: none;
}
sl-card::part(footer) {
border: none;
}
/* Input */
sl-input {
position: relative;
background-color: var(--dna-brand-reverse);
max-width: 343px;
}
sl-input[block] {
max-width: 100%;
}
sl-input::part(input) {
background: transparent;
}
sl-input::part(base) {
border-radius: 0;
border: 1px solid var(--dna-color-light-grey);
}
sl-input[variant='floating-label']:is(
:focus,
:focus-within,
:focus-visible,
[data-user-valid],
[data-user-invalid]
)::part(base) {
border-color: var(--dna-color-midnight);
}
sl-input[variant='floating-label']::part(form-control-label) {
position: absolute;
top: 0;
margin: 10px;
padding: 0 10px;
background-color: var(--dna-brand-reverse);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
z-index: 10;
border: none;
font-size: 16px;
}
sl-input[variant='floating-label']:is(
:focus,
:focus-within,
:focus-visible,
[data-user-valid],
[data-user-invalid]
)::part(form-control-label) {
top: -15px;
font-size: 10px;
line-height: 14px;
padding: 0 4px;
font-size: 12px;
}
/* Input End */
/* Input Reverse */
sl-input[variant='reverse'] {
background-color: var(--dna-color-midnight);
--sl-input-background-color-hover: var(--dna-color-midnight);
--sl-input-color: var(--dna-brand-reverse);
--sl-color-primary-500: var(--dna-brand-reverse);
}
sl-input[variant='reverse']::part(base) {
border-radius: 0;
border: 1px solid var(--dna-color-midnight);
background-color: var(--dna-color-midnight);
}
sl-input[variant='reverse']::part(input) {
color: var(--dna-brand-reverse);
background: var(--dna-color-midnight);
}
sl-input[variant='reverse']::part(input)::placeholder {
color: var(--dna-brand-reverse);
}
/* End Input Reverse */
/* Select */
sl-select {
position: relative;
background-color: var(--dna-brand-reverse);
max-width: 343px;
}
sl-select[block] {
max-width: 100%;
}
sl-select::part(combobox) {
border-radius: 0;
border: 1px solid var(--dna-color-light-grey);
}
sl-select[open]::part(combobox),
sl-select[open]:is(:focus, :focus-within, :focus-visible)::part(combobox) {
border: 1px solid var(--dna-color-midnight);
}
/* Select End */
/* Checkbox */
sl-checkbox {
--toggle-size: 20px;
--sl-input-border-color: var(--dna-color-light-grey);
}
sl-checkbox::part(base) {
align-items: center;
}
sl-checkbox::part(control) {
border-radius: 0;
}
sl-checkbox::part(label),
sl-checkbox[size='large']::part(label) {
font: var(--dna-body-p2-font);
line-height: 16px;
margin-inline-start: 16px;
}
sl-checkbox[size='large'] {
--toggle-size: 24px;
}
sl-checkbox[checked]::part(control) {
color: white;
background: var(--dna-color-midnight);
}
/* Checkbox End */
/* Radio */
sl-radio::part(base),
sl-radio[size='large']::part(base) {
font: var(--dna-body-p2-font);
}
sl-radio::part(checked-icon) {
color: var(--dna-color-midnight);
background-color: var(--dna-color-midnight);
width: 10px;
height: 10px;
border-radius: 50%;
}
sl-radio[size='large']::part(checked-icon) {
width: 14px;
height: 14px;
}
sl-radio::part(control) {
border: 1px solid var(--dna-color-light-grey);
}
sl-radio::part(control--checked) {
border: 1px solid var(--dna-color-midnight);
background-color: var(--dna-brand-reverse);
}
sl-radio-group::part(form-control-label) {
font-size: 14px;
font: var(--dna-body-p3-font);
}
sl-radio-group::part(form-control-input) {
display: flex;
flex-direction: column;
gap: 24px;
}
@media screen and (min-width: 768px) {
sl-radio-group::part(form-control-input) {
gap: 16px;
}
}
sl-radio-group::part(form-control-label) {
margin-bottom: 8px;
}
/* Radio End */
sl-carousel::part(scroll-container) {
border-radius: 0px;
}
`,
}