@okshaun/components 0.5.8 → 1.0.1

package/dist/styles/global.css

@@ -0,0 +1,148 @@
+@layer base {
+  :root {
+    --made-with-panda: '🐼';
+}
+
+  *,::before,::after,::backdrop {
+    --blur: /*-*/ /*-*/;
+    --brightness: /*-*/ /*-*/;
+    --contrast: /*-*/ /*-*/;
+    --grayscale: /*-*/ /*-*/;
+    --hue-rotate: /*-*/ /*-*/;
+    --invert: /*-*/ /*-*/;
+    --saturate: /*-*/ /*-*/;
+    --sepia: /*-*/ /*-*/;
+    --drop-shadow: /*-*/ /*-*/;
+    --backdrop-blur: /*-*/ /*-*/;
+    --backdrop-brightness: /*-*/ /*-*/;
+    --backdrop-contrast: /*-*/ /*-*/;
+    --backdrop-grayscale: /*-*/ /*-*/;
+    --backdrop-hue-rotate: /*-*/ /*-*/;
+    --backdrop-invert: /*-*/ /*-*/;
+    --backdrop-opacity: /*-*/ /*-*/;
+    --backdrop-saturate: /*-*/ /*-*/;
+    --backdrop-sepia: /*-*/ /*-*/;
+    --gradient-from-position: /*-*/ /*-*/;
+    --gradient-to-position: /*-*/ /*-*/;
+    --gradient-via-position: /*-*/ /*-*/;
+    --scroll-snap-strictness: proximity;
+    --border-spacing-x: 0;
+    --border-spacing-y: 0;
+    --translate-x: 0;
+    --translate-y: 0;
+    --rotate: 0;
+    --rotate-x: 0;
+    --rotate-y: 0;
+    --skew-x: 0;
+    --skew-y: 0;
+    --scale-x: 1;
+    --scale-y: 1;
+}
+
+  *,*::before,*::after {
+    margin: var(--oks-spacing-0);
+    padding: var(--oks-spacing-0);
+    box-sizing: border-box;
+}
+
+  *:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]),*::before:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]),*::after:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+    opacity: 0.4;
+    cursor: not-allowed;
+    pointer-events: none;
+}
+
+  *:is(:focus-visible, [data-focus-visible=true]),*::before:is(:focus-visible, [data-focus-visible=true]),*::after:is(:focus-visible, [data-focus-visible=true]) {
+    border-color: var(--oks-colors-border-focused);
+}
+
+  html {
+    --global-font-heading: var(--oks-fonts-heading);
+    --global-font-body: var(--oks-fonts-body);
+    --global-font-sans: var(--oks-fonts-sans);
+    --global-font-serif: var(--oks-fonts-serif);
+    --global-font-mono: var(--oks-fonts-mono);
+    font-size: var(--oks-font-sizes-16);
+    line-height: calc(1em + 0.5rem);
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+}
+
+  body {
+    background: var(--oks-colors-surface);
+    font-family: var(--oks-fonts-body);
+    color: var(--oks-colors-text-subtlest);
+    font-weight: var(--oks-font-weights-normal);
+}
+
+  h1,h2,h3,h4,h5,h6 {
+    color: var(--oks-colors-text);
+    font-weight: var(--oks-font-weights-bold);
+    line-height: calc(1em + 0.5rem);
+}
+
+  p {
+    margin-bottom: 0.5rem;
+}
+
+  b,strong {
+    font-weight: bolder;
+}
+
+  i,em {
+    font-style: italic;
+}
+
+  u {
+    text-decoration: underline;
+}
+
+  code,kbd,samp,pre {
+    font-family: var(--oks-fonts-mono);
+    font-size: 1em;
+}
+
+  table {
+    border-color: border.subtle;
+}
+
+  button,input,optgroup,select,textarea {
+    margin: var(--oks-spacing-0);
+    font-family: var(--oks-fonts-body);
+    font-size: 100%;
+    line-height: calc(1em + 0.5rem);
+}
+
+  button,[type="button"],[type="reset"],[type="submit"] {
+    -webkit-appearance: button;
+}
+
+  legend {
+    padding: var(--oks-spacing-0);
+}
+
+  progress {
+    vertical-align: baseline;
+}
+
+  ::-webkit-inner-spin-button,::-webkit-outer-spin-button {
+    height: var(--oks-sizes-auto);
+}
+
+  [type="search"] {
+    -webkit-appearance: textfield;
+    outline-offset: -2px;
+}
+
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+  ::-webkit-file-upload-button {
+    font: inherit;
+    -webkit-appearance: button;
+}
+
+  summary {
+    display: list-item;
+}
+}

package/dist/styles/recipes/avatar.css

@@ -0,0 +1,185 @@
+@layer recipes.slots {
+  @layer _base {
+    .oks-avatar__root {
+      background: var(--oks-colors-bg-neutral);
+      display: inline-flex;
+      position: relative;
+      align-items: center;
+      justify-content: center;
+      vertical-align: middle;
+      flex-shrink: 0;
+      color: var(--oks-colors-text);
+      -webkit-user-select: none;
+      user-select: none;
+      aspect-ratio: var(--oks-aspect-ratios-square);
+}
+
+    .oks-avatar__image {
+      overflow: hidden;
+      object-fit: cover;
+}
+
+    .oks-avatar__image,.oks-avatar__fallback {
+      width: var(--oks-sizes-full);
+      height: var(--oks-sizes-full);
+}
+
+    .oks-avatar__fallback {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-family: var(--oks-fonts-sans);
+      font-weight: var(--oks-font-weights-medium);
+      text-transform: uppercase;
+      color: var(--oks-colors-text-subtle);
+}
+
+    .oks-avatar__presence {
+      bottom: var(--oks-spacing-0);
+}
+
+    .oks-avatar__presence,.oks-avatar__status {
+      border-radius: full;
+      border-width: var(--oks-border-widths-2);
+      border-style: solid;
+      border-color: bg;
+      position: absolute;
+      z-index: 1;
+      right: var(--oks-spacing-0);
+}
+
+    .oks-avatar__status {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      top: var(--oks-spacing-0);
+}
+}
+
+  .oks-avatar__root--size_xs {
+    width: var(--oks-sizes-16);
+    height: var(--oks-sizes-16);
+}
+
+  .oks-avatar__fallback--size_xs {
+    font-size: 8px;
+}
+
+  .oks-avatar__presence--size_xs {
+    width: var(--oks-sizes-6);
+    height: var(--oks-sizes-6);
+}
+
+  .oks-avatar__status--size_xs {
+    width: var(--oks-sizes-8);
+    height: var(--oks-sizes-8);
+}
+
+  .oks-avatar__root--shape_circle,.oks-avatar__image--shape_circle {
+    border-radius: var(--oks-radii-999);
+}
+
+  .oks-avatar__root--size_sm {
+    width: var(--oks-sizes-20);
+    height: var(--oks-sizes-20);
+}
+
+  .oks-avatar__fallback--size_sm {
+    font-size: 10px;
+}
+
+  .oks-avatar__presence--size_sm {
+    width: var(--oks-sizes-8);
+    height: var(--oks-sizes-8);
+}
+
+  .oks-avatar__status--size_sm {
+    width: var(--oks-sizes-10);
+    height: var(--oks-sizes-10);
+}
+
+  .oks-avatar__root--size_md {
+    width: var(--oks-sizes-24);
+    height: var(--oks-sizes-24);
+}
+
+  .oks-avatar__fallback--size_md {
+    font-size: var(--oks-font-sizes-12);
+}
+
+  .oks-avatar__presence--size_md {
+    width: var(--oks-sizes-8);
+    height: var(--oks-sizes-8);
+}
+
+  .oks-avatar__status--size_md {
+    width: var(--oks-sizes-10);
+    height: var(--oks-sizes-10);
+}
+
+  .oks-avatar__root--size_lg {
+    width: var(--oks-sizes-32);
+    height: var(--oks-sizes-32);
+}
+
+  .oks-avatar__fallback--size_lg {
+    font-size: var(--oks-font-sizes-14);
+}
+
+  .oks-avatar__presence--size_lg {
+    width: var(--oks-sizes-10);
+    height: var(--oks-sizes-10);
+}
+
+  .oks-avatar__status--size_lg {
+    width: var(--oks-sizes-12);
+    height: var(--oks-sizes-12);
+}
+
+  .oks-avatar__root--size_xl {
+    width: var(--oks-sizes-48);
+    height: var(--oks-sizes-48);
+}
+
+  .oks-avatar__fallback--size_xl {
+    font-size: var(--oks-font-sizes-20);
+}
+
+  .oks-avatar__presence--size_xl {
+    width: var(--oks-sizes-12);
+    height: var(--oks-sizes-12);
+}
+
+  .oks-avatar__status--size_xl {
+    width: var(--oks-sizes-16);
+    height: var(--oks-sizes-16);
+}
+
+  .oks-avatar__root--size_2xl {
+    width: var(--oks-sizes-64);
+    height: var(--oks-sizes-64);
+}
+
+  .oks-avatar__fallback--size_2xl {
+    font-size: var(--oks-font-sizes-24);
+}
+
+  .oks-avatar__presence--size_2xl {
+    width: var(--oks-sizes-14);
+    height: var(--oks-sizes-14);
+}
+
+  .oks-avatar__status--size_2xl {
+    width: var(--oks-sizes-20);
+    height: var(--oks-sizes-20);
+}
+
+  .oks-avatar__root--shape_square,.oks-avatar__image--shape_square {
+    border-radius: var(--oks-radii-4);
+}
+
+  .oks-avatar__root--shape_hexagon,.oks-avatar__image--shape_hexagon {
+    clip-path: polygon(45% 1.33975%,46.5798% .60307%,48.26352% .15192%,50% 0,51.73648% .15192%,53.4202% .60307%,55% 1.33975%,89.64102% 21.33975%,91.06889% 22.33956%,92.30146% 23.57212%,93.30127% 25%,94.03794% 26.5798%,94.48909% 28.26352%,94.64102% 30%,94.64102% 70%,94.48909% 71.73648%,94.03794% 73.4202%,93.30127% 75%,92.30146% 76.42788%,91.06889% 77.66044%,89.64102% 78.66025%,55% 98.66025%,53.4202% 99.39693%,51.73648% 99.84808%,50% 100%,48.26352% 99.84808%,46.5798% 99.39693%,45% 98.66025%,10.35898% 78.66025%,8.93111% 77.66044%,7.69854% 76.42788%,6.69873% 75%,5.96206% 73.4202%,5.51091% 71.73648%,5.35898% 70%,5.35898% 30%,5.51091% 28.26352%,5.96206% 26.5798%,6.69873% 25%,7.69854% 23.57212%,8.93111% 22.33956%,10.35898% 21.33975%);
+    -webkit-clip-path: polygon(45% 1.33975%,46.5798% .60307%,48.26352% .15192%,50% 0,51.73648% .15192%,53.4202% .60307%,55% 1.33975%,89.64102% 21.33975%,91.06889% 22.33956%,92.30146% 23.57212%,93.30127% 25%,94.03794% 26.5798%,94.48909% 28.26352%,94.64102% 30%,94.64102% 70%,94.48909% 71.73648%,94.03794% 73.4202%,93.30127% 75%,92.30146% 76.42788%,91.06889% 77.66044%,89.64102% 78.66025%,55% 98.66025%,53.4202% 99.39693%,51.73648% 99.84808%,50% 100%,48.26352% 99.84808%,46.5798% 99.39693%,45% 98.66025%,10.35898% 78.66025%,8.93111% 77.66044%,7.69854% 76.42788%,6.69873% 75%,5.96206% 73.4202%,5.51091% 71.73648%,5.35898% 70%,5.35898% 30%,5.51091% 28.26352%,5.96206% 26.5798%,6.69873% 25%,7.69854% 23.57212%,8.93111% 22.33956%,10.35898% 21.33975%);
+}
+}

package/dist/styles/recipes/badge.css

@@ -0,0 +1,85 @@
+@layer recipes.slots {
+  @layer _base {
+    .oks-badge__root {
+      display: inline-flex;
+      position: relative;
+      vertical-align: middle;
+}
+
+    .oks-badge__indicator {
+      border-radius: var(--oks-radii-999);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: var(--oks-font-weights-medium);
+      font-family: var(--oks-fonts-sans);
+      line-height: 1;
+      white-space: nowrap;
+      -webkit-user-select: none;
+      user-select: none;
+      z-index: 1;
+}
+}
+
+  .oks-badge__indicator--size_sm {
+    padding: var(--oks-spacing-3);
+    font-size: 10px;
+    height: var(--oks-sizes-6);
+}
+
+  .oks-badge__indicator--variant_danger {
+    background: var(--oks-colors-bg-danger-bold);
+    color: var(--oks-colors-text-inverse);
+}
+
+  .oks-badge__indicator--size_md {
+    padding: var(--oks-spacing-4);
+    font-size: var(--oks-font-sizes-12);
+    height: var(--oks-sizes-8);
+}
+
+  .oks-badge__indicator--size_lg {
+    padding: var(--oks-spacing-5);
+    font-size: var(--oks-font-sizes-14);
+    height: var(--oks-sizes-10);
+}
+
+  .oks-badge__indicator--variant_success {
+    background: var(--oks-colors-bg-success-bold);
+    color: var(--oks-colors-text-inverse);
+}
+
+  .oks-badge__indicator--variant_warning {
+    background: var(--oks-colors-bg-warning-bold);
+    color: var(--oks-colors-text-warning-inverse);
+}
+
+  .oks-badge__indicator--variant_info {
+    background: var(--oks-colors-bg-info-bold);
+    color: var(--oks-colors-text-inverse);
+}
+
+  .oks-badge__indicator--variant_neutral {
+    background: var(--oks-colors-neutral-30);
+    color: var(--oks-colors-text);
+}
+
+  .dark .oks-badge__indicator--variant_neutral,.oks-badge__indicator--variant_neutral:is([data-color-mode=dark] *),[data-color-mode=dark] .oks-badge__indicator--variant_neutral {
+    background: var(--oks-colors-dark-neutral-40);
+}
+
+  .oks-badge__indicator--variant_subtle {
+    background: var(--oks-colors-bg-neutral);
+    color: var(--oks-colors-text);
+}
+
+  .oks-badge__indicator--variant_inverted {
+    background: bg.neutral.inverse.bold;
+    color: var(--oks-colors-text-inverse);
+}
+
+  .oks-badge__indicator--variant_subtle-inverted {
+    background: var(--oks-colors-bg-neutral-inverse-subtle);
+    color: var(--oks-colors-text);
+}
+}

package/dist/styles/recipes/breadcrumbs.css

@@ -0,0 +1,38 @@
+@layer recipes {
+  @layer _base {
+    .oks-breadcrumbs {
+      display: flex;
+      align-items: center;
+}
+
+    .oks-breadcrumbs span {
+      margin-inline: var(--oks-spacing-6);
+      color: var(--oks-colors-gray-20);
+}
+
+    .oks-breadcrumbs li {
+      display: flex;
+      align-items: center;
+}
+
+    .oks-breadcrumbs a {
+      color: var(--oks-colors-gray-60);
+}
+
+    .dark .oks-breadcrumbs a,.oks-breadcrumbs a:is([data-color-mode=dark] *),[data-color-mode=dark] .oks-breadcrumbs a {
+      color: var(--oks-colors-gray-60);
+}
+
+    .oks-breadcrumbs a:is(:focus-visible, [data-focus-visible=true]) {
+      color: var(--oks-colors-blue-50);
+}
+
+    .oks-breadcrumbs p {
+      color: var(--oks-colors-gray-90);
+}
+
+    .dark .oks-breadcrumbs p,.oks-breadcrumbs p:is([data-color-mode=dark] *),[data-color-mode=dark] .oks-breadcrumbs p {
+      color: var(--oks-colors-gray-10);
+}
+    }
+}

package/dist/styles/recipes/button.css

@@ -0,0 +1,195 @@
+@layer recipes.slots {
+  @layer _base {
+    .oks-button__container {
+      gap: var(--oks-spacing-4);
+      border-width: var(--oks-border-widths-1);
+      border-style: solid;
+      border-color: var(--oks-colors-transparent);
+      border-radius: var(--oks-radii-4);
+      text-decoration: none;
+      position: relative;
+      appearance: none;
+      -webkit-appearance: none;
+      display: flex;
+      align-items: center;
+      --transition-duration: var(--oks-durations-fast);
+      transition-duration: var(--oks-durations-fast);
+      transition-property: background, border-color, color, box-shadow;
+      --transition-easing: var(--oks-easings-default);
+      transition-timing-function: var(--oks-easings-default);
+      -webkit-user-select: none;
+      user-select: none;
+      vertical-align: middle;
+      font-family: var(--oks-fonts-sans);
+      font-weight: var(--oks-font-weights-medium);
+      font-size: var(--oks-font-sizes-16);
+      line-height: var(--oks-line-heights-default);
+      outline-width: var(--oks-border-widths-2);
+      outline-style: solid;
+      outline-color: var(--oks-colors-transparent);
+      white-space: nowrap;
+      cursor: pointer;
+      min-width: var(--oks-sizes-0);
+      width: var(--oks-sizes-fit);
+      height: var(--oks-sizes-fit);
+}
+
+    .oks-button__container:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+      background: var(--oks-colors-bg-disabled);
+      border-color: var(--oks-colors-border-disabled);
+      cursor: not-allowed;
+      color: var(--oks-colors-text-disabled);
+      fill: var(--oks-colors-icon-disabled);
+}
+
+    .oks-button__container:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]):is(:hover, [data-hover=true]) {
+      background: var(--oks-colors-bg-disabled);
+      border-color: var(--oks-colors-border-disabled);
+      color: var(--oks-colors-text-disabled);
+      fill: var(--oks-colors-icon-disabled);
+}
+
+    .oks-button__container:is([aria-selected=true], [data-selected=true]) {
+      background: var(--oks-colors-bg-selected);
+      border-color: var(--oks-colors-transparent);
+      color: var(--oks-colors-text-selected);
+      fill: var(--oks-colors-icon-selected);
+}
+
+    .oks-button__container:is(:focus-visible, [data-focus-visible=true]) {
+      outline-color: var(--oks-colors-border-focused);
+}
+
+    .oks-button__icon {
+      aspect-ratio: var(--oks-aspect-ratios-square);
+      --transition-duration: var(--oks-durations-fast);
+      transition-duration: var(--oks-durations-fast);
+      transition-property: fill;
+      --transition-easing: var(--oks-easings-default);
+      transition-timing-function: var(--oks-easings-default);
+}
+}
+
+  .oks-button__container--variant_default {
+    background: var(--oks-colors-bg-neutral);
+    color: var(--oks-colors-text);
+    fill: var(--oks-colors-icon-decorative);
+}
+
+  .oks-button__container--variant_default:is(:hover, [data-hover=true]) {
+    background: var(--oks-colors-bg-neutral-hovered);
+    fill: var(--oks-colors-icon-decorative-hovered);
+}
+
+  .oks-button__container--variant_default:is(:active, [data-active=true]) {
+    background: var(--oks-colors-bg-neutral-pressed);
+    fill: var(--oks-colors-icon-decorative-hovered);
+}
+
+  .oks-button__container--size_md {
+    padding-block: var(--oks-spacing-3);
+    padding-inline: var(--oks-spacing-12);
+    font-size: var(--oks-font-sizes-16);
+}
+
+  .oks-button__icon--size_md {
+    width: var(--oks-sizes-24);
+    height: var(--oks-sizes-24);
+}
+
+  .oks-button__container--variant_primary {
+    background: var(--oks-colors-bg-brand-boldest);
+    color: var(--oks-colors-text-inverse);
+    fill: var(--oks-colors-icon-decorative-inverse);
+}
+
+  .oks-button__container--variant_primary:is(:hover, [data-hover=true]) {
+    background: var(--oks-colors-bg-brand-boldest-hovered);
+    fill: var(--oks-colors-icon-inverse);
+}
+
+  .oks-button__container--variant_primary:is(:active, [data-active=true]) {
+    background: var(--oks-colors-bg-brand-boldest-pressed);
+    fill: var(--oks-colors-icon-inverse);
+}
+
+  .oks-button__container--variant_subtle {
+    background: var(--oks-colors-bg-neutral-subtle);
+    color: var(--oks-colors-text-subtle);
+    fill: var(--oks-colors-icon-decorative);
+}
+
+  .oks-button__container--variant_subtle:is(:hover, [data-hover=true]) {
+    background: var(--oks-colors-bg-neutral-subtle-hovered);
+    color: var(--oks-colors-text);
+    fill: var(--oks-colors-icon-decorative-hovered);
+}
+
+  .oks-button__container--variant_subtle:is(:active, [data-active=true]) {
+    background: var(--oks-colors-bg-neutral-subtle-pressed);
+    color: var(--oks-colors-text);
+    fill: var(--oks-colors-icon-decorative-hovered);
+}
+
+  .oks-button__container--variant_hollow {
+    background: var(--oks-colors-bg-neutral-subtle);
+    border-color: var(--oks-colors-border);
+    color: var(--oks-colors-text-subtle);
+    fill: var(--oks-colors-icon-decorative);
+}
+
+  .oks-button__container--variant_hollow:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+    border-color: var(--oks-colors-border-disabled);
+}
+
+  .oks-button__container--variant_hollow:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]):is(:hover, [data-hover=true]) {
+    border-color: var(--oks-colors-border-disabled);
+}
+
+  .oks-button__container--variant_hollow:is(:hover, [data-hover=true]) {
+    background: var(--oks-colors-bg-neutral-subtle-hovered);
+    border-color: var(--oks-colors-border);
+    color: var(--oks-colors-text);
+    fill: var(--oks-colors-icon-decorative-hovered);
+}
+
+  .oks-button__container--variant_hollow:is(:active, [data-active=true]) {
+    background: var(--oks-colors-bg-neutral-subtle-pressed);
+    border-color: var(--oks-colors-border);
+    color: var(--oks-colors-text);
+    fill: var(--oks-colors-icon-decorative-hovered);
+}
+
+  .oks-button__container--size_lg {
+    padding-block: var(--oks-spacing-7);
+    padding-inline: var(--oks-spacing-14);
+    font-size: var(--oks-font-sizes-16);
+}
+
+  .oks-button__icon--size_lg {
+    width: var(--oks-sizes-24);
+    height: var(--oks-sizes-24);
+}
+
+  .oks-button__container--size_sm {
+    padding-block: var(--oks-spacing-1);
+    padding-inline: var(--oks-spacing-8);
+    font-size: var(--oks-font-sizes-14);
+}
+
+  .oks-button__icon--size_sm {
+    width: var(--oks-sizes-22);
+    height: var(--oks-sizes-22);
+}
+
+  .oks-button__container--size_xl {
+    padding-block: var(--oks-spacing-9);
+    padding-inline: var(--oks-spacing-16);
+    font-size: var(--oks-font-sizes-20);
+}
+
+  .oks-button__icon--size_xl {
+    width: 28px;
+    height: 28px;
+}
+}

package/dist/styles/recipes/card.css

@@ -0,0 +1,57 @@
+@layer recipes {
+  @layer _base {
+    .oks-card {
+      background: var(--oks-colors-surface);
+      border-radius: var(--oks-radii-8);
+      display: block;
+      text-align: left;
+      outline-width: var(--oks-border-widths-1);
+      outline-style: solid;
+      outline-color: var(--oks-colors-transparent);
+      outline-offset: var(--oks-spacing-0);
+}
+}
+
+  .oks-card--variant_default {
+    background: var(--oks-colors-surface-raised);
+    border-width: var(--oks-border-widths-1);
+    border-color: var(--oks-colors-transparent);
+    box-shadow: var(--oks-shadows-raised);
+}
+
+  .oks-card--interactive_false {
+    cursor: default;
+}
+
+  .oks-card--interactive_true {
+    cursor: pointer;
+}
+
+  .oks-card--variant_flat {
+    border-width: var(--oks-border-widths-1);
+    border-style: solid;
+    border-color: var(--oks-colors-border);
+    box-shadow: var(--oks-shadows-zero);
+}
+
+  .oks-card--variant_sunken {
+    background: var(--oks-colors-surface-sunken);
+}
+
+  .oks-card--variant_sunken,.oks-card--variant_ghost {
+    border-width: var(--oks-border-widths-1);
+    border-style: solid;
+    border-color: var(--oks-colors-transparent);
+}
+
+  .oks-card--variant_ghost {
+    background: var(--oks-colors-transparent);
+}
+
+  .oks-card--variant_overlay {
+    background: var(--oks-colors-surface-overlay);
+    border-width: var(--oks-border-widths-1);
+    border-color: var(--oks-colors-transparent);
+    box-shadow: var(--oks-shadows-overlay);
+}
+}