@okshaun/components 0.5.8 → 1.0.1

package/dist/styles/recipes/checkbox-input.css

@@ -0,0 +1,12 @@
+@layer recipes {
+  @layer _base {
+    .oks-checkbox-input {
+      display: flex;
+      align-items: start;
+}
+
+    .oks-checkbox-input[class*="-label"] {
+      font-size: var(--oks-font-sizes-16);
+}
+    }
+}

package/dist/styles/recipes/checkbox.css

@@ -0,0 +1,90 @@
+@layer recipes.slots {
+  @layer _base {
+    .oks-checkbox__container {
+      gap: var(--oks-spacing-4);
+      position: relative;
+      display: inline-grid;
+      grid-template-columns: auto 1fr;
+      align-items: start;
+      cursor: pointer;
+      -webkit-user-select: none;
+      user-select: none;
+      color: var(--oks-colors-text);
+}
+
+    .oks-checkbox__container:is([data-error], [data-error=true]) {
+      color: var(--oks-colors-text-danger);
+}
+
+    .oks-checkbox__input {
+      margin: var(--oks-spacing-0);
+      padding: var(--oks-spacing-0);
+      position: absolute;
+      opacity: 0;
+      z-index: 1;
+      cursor: inherit;
+      width: var(--oks-sizes-full);
+      height: var(--oks-sizes-full);
+}
+
+    .oks-checkbox__input ~ [name='checkbox'] {
+      display: inline-grid;
+}
+
+    .oks-checkbox__input:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+      display: inline-grid;
+}
+
+    .oks-checkbox__input:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) ~ svg {
+      pointer-events: none;
+}
+
+    .oks-checkbox__input:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]):is(:hover, [data-hover=true]) {
+      cursor: not-allowed;
+}
+
+    .oks-checkbox__input:is([data-error], [data-error=true]) {
+      display: inline-grid;
+}
+
+    .oks-checkbox__input:is([data-error], [data-error=true]) ~ svg {
+      fill: var(--oks-colors-icon-danger);
+}
+
+    .oks-checkbox__input:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ [name='checkbox-checked'] {
+      display: inline-grid;
+      fill: var(--oks-colors-icon);
+}
+
+    .oks-checkbox__input:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ [name='checkbox'] {
+      display: none;
+}
+
+    .oks-checkbox__input:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state="indeterminate"]) ~ [name='checkbox-indeterminate'] {
+      display: inline-grid;
+      fill: var(--oks-colors-icon);
+}
+
+    .oks-checkbox__input:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state="indeterminate"]) ~ [name='checkbox'] {
+      display: none;
+}
+
+    .oks-checkbox__input:is(:focus-visible, [data-focus-visible=true]) ~ [name='checkbox-focus'] {
+      display: inline-grid;
+      position: absolute;
+      fill: var(--oks-colors-border-focused);
+}
+
+    .oks-checkbox__indicator {
+      place-content: center;
+      display: none;
+      width: var(--oks-sizes-24);
+      height: var(--oks-sizes-24);
+}
+
+    .oks-checkbox__indicator:is([name='checkbox']) {
+      display: inline-grid;
+      fill: var(--oks-colors-icon-subtlest);
+}
+    }
+}

package/dist/styles/recipes/chip.css

@@ -0,0 +1,137 @@
+@layer recipes.slots {
+  @layer _base {
+    .oks-chip__container {
+      border: var(--oks-borders-none);
+      background: var(--oks-colors-bg-neutral);
+      border-radius: var(--oks-radii-999);
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      appearance: none;
+      -webkit-appearance: none;
+      font-family: var(--oks-fonts-sans);
+      line-height: var(--oks-line-heights-default);
+      font-weight: var(--oks-font-weights-medium);
+      white-space: nowrap;
+      vertical-align: middle;
+      cursor: pointer;
+      --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);
+      -webkit-user-select: none;
+      user-select: none;
+      outline-width: var(--oks-border-widths-2);
+      outline-style: solid;
+      outline-color: var(--oks-colors-transparent);
+      color: var(--oks-colors-text);
+      fill: var(--oks-colors-icon-decorative);
+      width: var(--oks-sizes-fit);
+}
+
+    .oks-chip__container:is([data-loading], [aria-busy=true]) {
+      animation: var(--oks-animations-pulse);
+      cursor: wait;
+}
+
+    .oks-chip__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-chip__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-chip__container:is([aria-selected=true], [data-selected=true]) {
+      background: var(--oks-colors-bg-brand-boldest);
+      color: var(--oks-colors-text-inverse);
+      fill: var(--oks-colors-icon-decorative-inverse);
+}
+
+    .oks-chip__container:is([aria-selected=true], [data-selected=true]):is(:hover, [data-hover=true]) {
+      background: var(--oks-colors-bg-brand-boldest-hovered);
+      fill: var(--oks-colors-icon-inverse);
+}
+
+    .oks-chip__container:is([aria-selected=true], [data-selected=true]):is(:active, [data-active=true]) {
+      background: var(--oks-colors-bg-brand-boldest-pressed);
+      fill: var(--oks-colors-icon-inverse);
+}
+
+    .oks-chip__container:is(:deleted, [deleted], [data-deleted=true]) {
+      text-decoration: line-through;
+      cursor: not-allowed;
+      opacity: 0.6;
+}
+
+    .oks-chip__container:is(:focus-visible, [data-focus-visible=true]) {
+      outline-color: var(--oks-colors-border-focused);
+}
+
+    .oks-chip__container:is(:hover, [data-hover=true]) {
+      background: var(--oks-colors-bg-neutral-hovered);
+      fill: var(--oks-colors-icon-decorative-hovered);
+}
+
+    .oks-chip__container:is(:active, [data-active=true]) {
+      background: var(--oks-colors-bg-neutral-pressed);
+      fill: var(--oks-colors-icon-decorative-hovered);
+}
+
+    .oks-chip__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-chip__container--size_sm {
+    gap: var(--oks-spacing-2);
+    padding-inline: var(--oks-spacing-6);
+    padding-block: var(--oks-spacing-0);
+    font-size: var(--oks-font-sizes-14);
+    height: var(--oks-sizes-20);
+}
+
+  .oks-chip__icon--size_sm {
+    width: var(--oks-sizes-20);
+    height: var(--oks-sizes-20);
+}
+
+  .oks-chip__container--size_md {
+    gap: var(--oks-spacing-4);
+    padding-inline: var(--oks-spacing-8);
+    padding-block: var(--oks-spacing-1);
+    font-size: var(--oks-font-sizes-14);
+    height: var(--oks-sizes-24);
+}
+
+  .oks-chip__icon--size_md {
+    width: var(--oks-sizes-20);
+    height: var(--oks-sizes-20);
+}
+
+  .oks-chip__container--size_lg {
+    gap: var(--oks-spacing-4);
+    padding-inline: var(--oks-spacing-10);
+    padding-block: var(--oks-spacing-4);
+    font-size: var(--oks-font-sizes-16);
+    height: var(--oks-sizes-32);
+}
+
+  .oks-chip__icon--size_lg {
+    width: var(--oks-sizes-24);
+    height: var(--oks-sizes-24);
+}
+}

package/dist/styles/recipes/code.css

@@ -0,0 +1,12 @@
+@layer recipes {
+  @layer _base {
+    .oks-code {
+      background: var(--oks-colors-gray-80);
+      padding: var(--oks-spacing-4);
+      overflow: auto;
+      position: relative;
+      white-space: pre;
+      font-size: var(--oks-font-sizes-14);
+}
+    }
+}

package/dist/styles/recipes/divider.css

@@ -0,0 +1,43 @@
+@layer recipes {
+  @layer _base {
+    .oks-divider {
+      --divider-weight: var(--oks-sizes-1);
+      border-color: var(--oks-colors-current);
+      color: var(--oks-colors-gray-20);
+      min-width: var(--oks-sizes-1);
+      min-height: var(--oks-sizes-1);
+}
+
+    .dark .oks-divider,.oks-divider:is([data-color-mode=dark] *),[data-color-mode=dark] .oks-divider {
+      color: var(--oks-colors-gray-80);
+}
+}
+
+  .oks-divider--direction_horizontal {
+    width: stretch;
+    border-top-style: solid;
+    border-top-width: var(--divider-weight);
+}
+
+  .oks-divider--weight_thin {
+    --divider-weight: var(--oks-sizes-1);
+}
+
+  .oks-divider--weight_medium {
+    --divider-weight: var(--oks-sizes-2);
+}
+
+  .oks-divider--weight_thick {
+    --divider-weight: var(--oks-sizes-4);
+}
+
+  .oks-divider--weight_thicker {
+    --divider-weight: var(--oks-sizes-6);
+}
+
+  .oks-divider--direction_vertical {
+    height: stretch;
+    border-left-style: solid;
+    border-left-width: var(--divider-weight);
+}
+}

package/dist/styles/recipes/form-field.css

@@ -0,0 +1,39 @@
+@layer recipes.slots {
+  @layer _base {
+    .oks-formfield__formFieldContainer:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+      pointer-events: none;
+}
+
+    .oks-formfield__formFieldContainer:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) p {
+      color: var(--oks-colors-text-disabled);
+}
+
+    .oks-formfield__contentWrapper {
+      gap: var(--oks-spacing-6);
+      display: flex;
+      flex-direction: column;
+}
+
+    .oks-formfield__labelWrapper p {
+      color: var(--oks-colors-text);
+}
+
+    .oks-formfield__headLabel {
+      gap: var(--oks-spacing-4);
+      display: flex;
+}
+}
+
+  .oks-formfield__formFieldContainer--layout_inline {
+    gap: var(--oks-spacing-12);
+    display: grid;
+    grid-template-columns: auto 1fr;
+    align-items: start;
+}
+
+  .oks-formfield__formFieldContainer--layout_default {
+    gap: var(--oks-spacing-6);
+    display: flex;
+    flex-direction: column;
+}
+}

package/dist/styles/recipes/heading.css

@@ -0,0 +1,40 @@
+@layer recipes {
+  @layer _base {
+    .oks-heading {
+      font-family: var(--oks-fonts-heading);
+      font-weight: var(--oks-font-weights-black);
+      color: var(--oks-colors-text-bold);
+      line-height: var(--oks-line-heights-default);
+}
+}
+
+  .oks-heading--level_h2 {
+    font-size: var(--oks-font-sizes-32);
+}
+
+  .oks-heading--level_h2,.oks-heading--level_h3 {
+    font-family: var(--oks-fonts-sans);
+    font-weight: var(--oks-font-weights-bold);
+    color: var(--oks-colors-text);
+    line-height: var(--oks-line-heights-default);
+}
+
+  .oks-heading--level_h3 {
+    font-size: var(--oks-font-sizes-24);
+}
+
+  .oks-heading--level_h1 {
+    font-size: var(--oks-font-sizes-40);
+}
+
+  .oks-heading--level_h1,.oks-heading--level_h4 {
+    font-family: var(--oks-fonts-sans);
+    font-weight: var(--oks-font-weights-bold);
+    color: var(--oks-colors-text);
+    line-height: var(--oks-line-heights-default);
+}
+
+  .oks-heading--level_h4 {
+    font-size: var(--oks-font-sizes-20);
+}
+}

package/dist/styles/recipes/icon-button.css

@@ -0,0 +1,181 @@
+@layer recipes.slots {
+  @layer _base {
+    .oks-iconButton__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-iconButton__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-iconButton__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-iconButton__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-iconButton__container:is(:focus-visible, [data-focus-visible=true]) {
+      outline-color: var(--oks-colors-border-focused);
+}
+
+    .oks-iconButton__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-iconButton__container--variant_subtle {
+    background: var(--oks-colors-bg-neutral-subtle);
+    color: var(--oks-colors-text-subtle);
+    fill: var(--oks-colors-icon-decorative);
+}
+
+  .oks-iconButton__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-iconButton__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-iconButton__container--size_md {
+    padding: var(--oks-spacing-3);
+    font-size: var(--oks-font-sizes-16);
+}
+
+  .oks-iconButton__icon--size_md {
+    width: var(--oks-sizes-24);
+    height: var(--oks-sizes-24);
+}
+
+  .oks-iconButton__container--variant_default {
+    background: var(--oks-colors-bg-neutral);
+    color: var(--oks-colors-text);
+    fill: var(--oks-colors-icon-decorative);
+}
+
+  .oks-iconButton__container--variant_default:is(:hover, [data-hover=true]) {
+    background: var(--oks-colors-bg-neutral-hovered);
+    fill: var(--oks-colors-icon-decorative-hovered);
+}
+
+  .oks-iconButton__container--variant_default:is(:active, [data-active=true]) {
+    background: var(--oks-colors-bg-neutral-pressed);
+    fill: var(--oks-colors-icon-decorative-hovered);
+}
+
+  .oks-iconButton__container--variant_primary {
+    background: var(--oks-colors-bg-brand-boldest);
+    color: var(--oks-colors-text-inverse);
+    fill: var(--oks-colors-icon-decorative-inverse);
+}
+
+  .oks-iconButton__container--variant_primary:is(:hover, [data-hover=true]) {
+    background: var(--oks-colors-bg-brand-boldest-hovered);
+    fill: var(--oks-colors-icon-inverse);
+}
+
+  .oks-iconButton__container--variant_primary:is(:active, [data-active=true]) {
+    background: var(--oks-colors-bg-brand-boldest-pressed);
+    fill: var(--oks-colors-icon-inverse);
+}
+
+  .oks-iconButton__container--size_lg {
+    padding: var(--oks-spacing-7);
+    font-size: var(--oks-font-sizes-16);
+}
+
+  .oks-iconButton__icon--size_lg {
+    width: var(--oks-sizes-24);
+    height: var(--oks-sizes-24);
+}
+
+  .oks-iconButton__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-iconButton__container--variant_hollow:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
+    border-color: var(--oks-colors-border-disabled);
+}
+
+  .oks-iconButton__container--variant_hollow:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]):is(:hover, [data-hover=true]) {
+    border-color: var(--oks-colors-border-disabled);
+}
+
+  .oks-iconButton__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-iconButton__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-iconButton__container--size_sm {
+    padding: var(--oks-spacing-1);
+    font-size: var(--oks-font-sizes-14);
+}
+
+  .oks-iconButton__icon--size_sm {
+    width: var(--oks-sizes-22);
+    height: var(--oks-sizes-22);
+}
+}

package/dist/styles/recipes/label.css

@@ -0,0 +1,14 @@
+@layer recipes {
+  @layer _base {
+    .oks-label {
+      font-size: var(--oks-font-sizes-14);
+      font-weight: var(--oks-font-weights-normal);
+      line-height: var(--oks-line-heights-tight);
+      cursor: default;
+}
+}
+
+  .oks-label--family_sans {
+    font-family: var(--oks-fonts-sans);
+}
+}

package/dist/styles/recipes/link.css

@@ -0,0 +1,49 @@
+@layer recipes {
+  @layer _base {
+    .oks-link {
+      gap: var(--oks-spacing-1);
+      text-decoration: none;
+      display: inline-flex;
+      align-items: center;
+      font-weight: var(--oks-font-weights-medium);
+      color: var(--oks-colors-blue-70);
+      background-image: linear-gradient(90deg, transparent 0% 100%);
+      background-size: 100% 1px;
+      background-repeat: no-repeat;
+      background-position-y: 100%;
+      cursor: pointer;
+      width: fit-content;
+}
+
+    .dark .oks-link,.oks-link:is([data-color-mode=dark] *),[data-color-mode=dark] .oks-link {
+      color: var(--oks-colors-blue-40);
+}
+
+    p .oks-link {
+      background-image: linear-gradient(90deg, currentColor 0% 100%);
+}
+
+    .oks-link:is(:hover, [data-hover=true]) {
+      color: var(--oks-colors-blue-60);
+      background-color: var(--oks-colors-blue-10);
+      background-image: linear-gradient(90deg, currentColor 0% 100%);
+}
+
+    .dark .oks-link:is(:hover, [data-hover=true]),.oks-link:is(:hover, [data-hover=true]):is([data-color-mode=dark] *),[data-color-mode=dark] .oks-link:is(:hover, [data-hover=true]) {
+      color: var(--oks-colors-blue-40);
+      background-color: var(--oks-colors-blue-100);
+}
+}
+
+  .oks-link--family_inherit {
+    font-family: inherit;
+}
+
+  .oks-link--family_mono {
+    font-family: var(--oks-fonts-mono);
+}
+
+  .oks-link--size_14 {
+    font-size: var(--oks-sizes-14);
+}
+}