@okshaun/components 1.0.1 → 2.0.0

package/dist/styles/recipes/textinput.css

@@ -1,87 +0,0 @@
-@layer recipes {
-  @layer _base {
-    .oks-textinput {
-      background: var(--oks-colors-bg-input);
-      border-width: var(--oks-border-widths-1);
-      border-style: solid;
-      border-color: var(--oks-colors-border-input);
-      border-radius: var(--oks-radii-4);
-      display: inline-grid;
-      position: relative;
-      outline-width: var(--oks-border-widths-2);
-      outline-offset: calc(var(--oks-spacing-1) * -1);
-      outline-style: solid;
-      outline-color: var(--oks-colors-transparent);
-      line-height: var(--oks-line-heights-default);
-      font-family: var(--oks-fonts-body);
-      color: var(--oks-colors-text);
-      --transition-duration: var(--oks-durations-fast);
-      transition-duration: var(--oks-durations-fast);
-      transition-property: background, border-color, color, outline-color;
-      --transition-easing: var(--oks-easings-default);
-      transition-timing-function: var(--oks-easings-default);
-      width: var(--oks-sizes-full);
-}
-
-    .oks-textinput:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
-      background: var(--oks-colors-bg-disabled);
-      border-color: var(--oks-colors-border-disabled);
-      color: var(--oks-colors-text-disabled);
-}
-
-    .oks-textinput:is([data-error], [data-error=true]) {
-      background: var(--oks-colors-bg-danger);
-      border-color: var(--oks-colors-border-danger);
-      display: inline-grid;
-      color: var(--oks-colors-text-danger);
-}
-
-    .oks-textinput:is([data-error], [data-error=true]):is(:hover, [data-hover=true]) {
-      background: var(--oks-colors-bg-danger-hovered);
-      border-color: var(--oks-colors-border-danger);
-}
-
-    .oks-textinput:is([data-error], [data-error=true]):is(:focus, [data-focus=true]) {
-      background: var(--oks-colors-bg-danger);
-      border-color: var(--oks-colors-border-danger);
-      outline-color: var(--oks-colors-border-danger);
-}
-
-    .oks-textinput:is([data-error], [data-error=true])::placeholder,.oks-textinput:is([data-error], [data-error=true])[data-placeholder] {
-      --mix-color: color-mix(in srgb, var(--oks-colors-text-danger) 60%, transparent);
-      color: var(--mix-color, var(--oks-colors-text-danger));
-}
-
-    .oks-textinput::placeholder,.oks-textinput[data-placeholder] {
-      color: var(--oks-colors-text-placeholder);
-}
-
-    .oks-textinput:is(:focus, [data-focus=true]) {
-      background: var(--oks-colors-bg-input-pressed);
-      border-color: var(--oks-colors-border-focused);
-      outline-color: var(--oks-colors-border-focused);
-}
-}
-
-  .oks-textinput--size_md {
-    padding-block: var(--oks-spacing-3);
-    padding-inline: var(--oks-spacing-10);
-    font-size: var(--oks-font-sizes-16);
-}
-
-  .oks-textinput--size_sm {
-    padding-block: var(--oks-spacing-0);
-    padding-inline: var(--oks-spacing-8);
-    font-size: var(--oks-font-sizes-14);
-}
-
-  .oks-textinput--size_lg {
-    padding-block: var(--oks-spacing-7);
-    padding-inline: var(--oks-spacing-12);
-    font-size: var(--oks-font-sizes-16);
-}
-
-  .oks-textinput--autoSize_false {
-    width: var(--oks-sizes-full);
-}
-}

package/dist/styles/recipes/theme-switcher.css

@@ -1,53 +0,0 @@
-@layer recipes {
-  @layer _base {
-    .oks-themeSwitcher {
-      background: var(--oks-colors-transparent);
-      margin: var(--oks-spacing-8);
-      border-width: var(--oks-border-widths-2);
-      border-style: solid;
-      border-color: var(--oks-colors-border);
-      border-radius: var(--oks-radii-100);
-      transition-property: var(--transition-prop, all);
-      transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
-      transition-duration: var(--transition-duration, 150ms);
-      position: relative;
-      color: var(--oks-colors-transparent);
-      cursor: pointer;
-      display: grid;
-      line-height: var(--oks-line-heights-none);
-      flex-shrink: 0;
-      aspect-ratio: var(--oks-aspect-ratios-square);
-      width: var(--oks-sizes-14);
-      height: var(--oks-sizes-14);
-      min-width: var(--oks-sizes-14);
-      min-height: var(--oks-sizes-14);
-}
-
-    .oks-themeSwitcher:before {
-      inset: var(--oks-spacing-0);
-      background: bg.neutral.inverse.bold;
-      border-radius: var(--oks-radii-100);
-      transition-property: var(--transition-prop, all);
-      transition-timing-function: var(--oks-easings-default);
-      transition-duration: var(--oks-durations-normal);
-      content: "";
-      position: absolute;
-      opacity: 0;
-      display: block;
-      --transition-easing: var(--oks-easings-default);
-      --transition-duration: var(--oks-durations-normal);
-}
-
-    .oks-themeSwitcher:is(:hover, [data-hover=true]) {
-      background: bg.neutral.inverse.bold;
-      border-color: var(--oks-colors-bg-neutral-bold);
-      cursor: pointer;
-}
-
-    .oks-themeSwitcher:is(:hover, [data-hover=true]):before {
-      inset: calc(var(--oks-spacing-8) * -1);
-      background: bg.neutral.inverse.bold;
-      opacity: 0.25;
-}
-    }
-}

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

@@ -1,12 +0,0 @@
-@layer recipes {
-  @layer _base {
-    .oks-toggle-input {
-      gap: var(--oks-spacing-8);
-      display: grid;
-      grid-template-columns: 40px auto;
-      -webkit-user-select: none;
-      user-select: none;
-      font-size: var(--oks-font-sizes-16);
-}
-    }
-}

package/dist/styles/recipes/toggle.css

@@ -1,125 +0,0 @@
-@layer recipes.slots {
-  @layer _base {
-    .oks-toggle__container {
-      position: relative;
-      cursor: pointer;
-      width: var(--oks-sizes-40);
-      height: var(--oks-sizes-24);
-}
-
-    .oks-toggle__container:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
-      opacity: 0.4;
-      pointer-events: none;
-      cursor: none;
-      display: inline-grid;
-}
-
-    .oks-toggle__input {
-      margin: var(--oks-spacing-0);
-      padding: var(--oks-spacing-0);
-      border: var(--oks-borders-none);
-      border-radius: 24px;
-      position: absolute;
-      opacity: 0;
-      z-index: 0;
-      cursor: inherit;
-      width: var(--oks-sizes-40);
-      height: var(--oks-sizes-24);
-}
-
-    .oks-toggle__input ~ [name='circle'] {
-      opacity: 1;
-      --transition-duration: 200ms;
-      --transition-easing: ease-in-out;
-      --mix-fill: color-mix(in srgb, var(--oks-colors-icon-decorative) 80%, transparent);
-      fill: var(--mix-fill, var(--oks-colors-icon-decorative));
-}
-
-    .oks-toggle__input ~ [name='circle'],.oks-toggle__input ~ [name='circle-check'] {
-      display: inline-grid;
-      position: absolute;
-      transform: translateX(0);
-      transition-property: transform, opacity;
-      transition-duration: 200ms;
-      transition-timing-function: ease-in-out;
-}
-
-    .oks-toggle__input ~ [name='circle-check'] {
-      opacity: 0;
-      --transition-duration: 200ms;
-      --transition-easing: ease-in-out;
-}
-
-    .oks-toggle__input:is(:focus-visible, [data-focus-visible=true]) {
-      border-radius: 24px;
-      appearance: none;
-      -webkit-appearance: none;
-      opacity: 1;
-      outline-color: var(--oks-colors-gray-80);
-      outline-offset: var(--oks-spacing-1);
-      outline-width: var(--oks-border-widths-2);
-      outline-style: solid;
-      width: var(--oks-sizes-40);
-      height: var(--oks-sizes-24);
-}
-
-    .dark .oks-toggle__input:is(:focus-visible, [data-focus-visible=true]),.oks-toggle__input:is(:focus-visible, [data-focus-visible=true]):is([data-color-mode=dark] *),[data-color-mode=dark] .oks-toggle__input:is(:focus-visible, [data-focus-visible=true]) {
-      outline-color: var(--oks-colors-gray-10);
-}
-
-    .oks-toggle__input:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ [name='toggle-bg'] {
-      background: var(--oks-colors-bg-neutral-inverse);
-      border-color: var(--oks-colors-bg-neutral-inverse);
-}
-
-    .oks-toggle__input:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ [name='circle'] {
-      opacity: 0;
-      transform: translateX(10px);
-}
-
-    .oks-toggle__input:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ [name='circle-check'] {
-      opacity: 1;
-      transform: translateX(16px);
-      fill: var(--oks-colors-icon-inverse);
-}
-
-    .oks-toggle__input:is([data-error], [data-error=true]) ~ [name='toggle-bg'] {
-      border-color: error.default;
-}
-
-    .oks-toggle__indicator {
-      display: none;
-      transition-property: border-color, background-color;
-      --transition-duration: 200ms;
-      transition-duration: 200ms;
-      --transition-easing: ease-in-out;
-      transition-timing-function: ease-in-out;
-      width: var(--oks-sizes-24);
-      height: var(--oks-sizes-24);
-}
-
-    .oks-toggle__indicator:is([name='circle']) {
-      fill: var(--oks-colors-gray-20);
-}
-
-    .dark .oks-toggle__indicator:is([name='circle']),.oks-toggle__indicator:is([name='circle']):is([data-color-mode=dark] *),[data-color-mode=dark] .oks-toggle__indicator:is([name='circle']) {
-      fill: var(--oks-colors-gray-40);
-}
-
-    .oks-toggle__background {
-      background: var(--oks-colors-surface);
-      border-radius: 24px;
-      border-width: var(--oks-border-widths-2);
-      border-style: solid;
-      border-color: var(--oks-colors-border);
-      position: absolute;
-      transition-property: border-color, background-color;
-      --transition-duration: 200ms;
-      transition-duration: 200ms;
-      --transition-easing: ease-in-out;
-      transition-timing-function: ease-in-out;
-      width: var(--oks-sizes-40);
-      height: var(--oks-sizes-24);
-}
-    }
-}

package/dist/styles/recipes/tooltip.css

@@ -1,133 +0,0 @@
-@layer recipes.slots {
-  @layer _base {
-    .oks-tooltip__wrapper {
-      position: relative;
-      cursor: default;
-      width: fit-content;
-      height: fit-content;
-}
-
-    .oks-tooltip__tooltipContent {
-      background: var(--oks-colors-gray-90);
-      gap: var(--oks-spacing-4);
-      border-radius: var(--oks-radii-4);
-      display: flex;
-      flex-direction: column;
-      color: var(--oks-colors-gray-10);
-      font-family: var(--oks-fonts-sans);
-      font-weight: var(--oks-font-weights-normal);
-      position: absolute;
-      box-shadow: var(--oks-shadows-medium);
-      z-index: 1;
-      pointer-events: none;
-      max-width: max-content;
-      width: max-content;
-}
-
-    .dark .oks-tooltip__tooltipContent,.oks-tooltip__tooltipContent:is([data-color-mode=dark] *),[data-color-mode=dark] .oks-tooltip__tooltipContent {
-      background: var(--oks-colors-gray-10);
-      color: var(--oks-colors-gray-90);
-}
-
-    .oks-tooltip__tooltipContent::after {
-      border-width: 9px;
-      border-style: solid;
-      border-color: var(--oks-colors-transparent);
-      content: '';
-      position: absolute;
-      width: var(--oks-sizes-0);
-      height: var(--oks-sizes-0);
-}
-
-    .oks-tooltip__title {
-      font-weight: var(--oks-font-weights-bold);
-      color: var(--oks-colors-text);
-}
-
-    .oks-tooltip__text {
-      color: var(--oks-colors-text-subtlest);
-}
-}
-
-  .oks-tooltip__tooltipContent--position_top {
-    transform: translateX(-50%);
-    opacity: 1;
-    bottom: 100%;
-    left: 50%;
-}
-
-  .oks-tooltip__tooltipContent--position_top::after {
-    transform: translate(-50%, -2%);
-    top: 100%;
-    left: 50%;
-    border-top-color: var(--oks-colors-gray-90);
-}
-
-  .dark .oks-tooltip__tooltipContent--position_top::after,.oks-tooltip__tooltipContent--position_top::after:is([data-color-mode=dark] *),[data-color-mode=dark] .oks-tooltip__tooltipContent--position_top::after {
-    border-top-color: var(--oks-colors-gray-10);
-}
-
-  .oks-tooltip__tooltipContent--caret_true::after {
-    display: block;
-}
-
-  .oks-tooltip__tooltipContent--size_md {
-    padding-block: var(--oks-spacing-8);
-    padding-inline: var(--oks-spacing-12);
-}
-
-  .oks-tooltip__title--size_md,.oks-tooltip__text--size_md {
-    font-size: var(--oks-font-sizes-14);
-}
-
-  .oks-tooltip__tooltipContent--position_bottom {
-    transform: translateX(-50%);
-    top: 100%;
-    left: 50%;
-}
-
-  .oks-tooltip__tooltipContent--position_bottom::after {
-    transform: translate(-50%, 2%);
-    bottom: 100%;
-    left: 50%;
-    border-bottom-color: var(--oks-colors-gray-90);
-}
-
-  .dark .oks-tooltip__tooltipContent--position_bottom::after,.oks-tooltip__tooltipContent--position_bottom::after:is([data-color-mode=dark] *),[data-color-mode=dark] .oks-tooltip__tooltipContent--position_bottom::after {
-    border-bottom-color: var(--oks-colors-gray-10);
-}
-
-  .oks-tooltip__tooltipContent--position_left {
-    transform: translate(-10%, -50%);
-    top: 50%;
-    right: calc(100% - 0.75rem);
-}
-
-  .oks-tooltip__tooltipContent--position_left::after {
-    transform: translate(48%, -50%);
-    top: 50%;
-    right: -6%;
-    border-left-color: var(--oks-colors-gray-90);
-}
-
-  .dark .oks-tooltip__tooltipContent--position_left::after,.oks-tooltip__tooltipContent--position_left::after:is([data-color-mode=dark] *),[data-color-mode=dark] .oks-tooltip__tooltipContent--position_left::after {
-    border-left-color: var(--oks-colors-gray-10);
-}
-
-  .oks-tooltip__tooltipContent--position_right {
-    transform: translate(10%, -50%);
-    top: 50%;
-    left: calc(100% - 0.75rem);
-}
-
-  .oks-tooltip__tooltipContent--position_right::after {
-    transform: translate(-48%, -50%);
-    top: 50%;
-    left: -6%;
-    border-right-color: var(--oks-colors-gray-90);
-}
-
-  .dark .oks-tooltip__tooltipContent--position_right::after,.oks-tooltip__tooltipContent--position_right::after:is([data-color-mode=dark] *),[data-color-mode=dark] .oks-tooltip__tooltipContent--position_right::after {
-    border-right-color: var(--oks-colors-gray-10);
-}
-}

package/dist/styles/recipes.css

@@ -1,30 +0,0 @@
-@import './recipes/breadcrumbs.css';
-@import './recipes/card.css';
-@import './recipes/checkbox-input.css';
-@import './recipes/code.css';
-@import './recipes/divider.css';
-@import './recipes/heading.css';
-@import './recipes/label.css';
-@import './recipes/link.css';
-@import './recipes/pre.css';
-@import './recipes/radio-input.css';
-@import './recipes/spinner.css';
-@import './recipes/tag.css';
-@import './recipes/text.css';
-@import './recipes/textarea.css';
-@import './recipes/textinput.css';
-@import './recipes/theme-switcher.css';
-@import './recipes/toggle-input.css';
-@import './recipes/badge.css';
-@import './recipes/button.css';
-@import './recipes/icon-button.css';
-@import './recipes/checkbox.css';
-@import './recipes/radio.css';
-@import './recipes/tooltip.css';
-@import './recipes/menu.css';
-@import './recipes/select.css';
-@import './recipes/toggle.css';
-@import './recipes/chip.css';
-@import './recipes/avatar.css';
-@import './recipes/modal.css';
-@import './recipes/form-field.css';

package/dist/styles/reset.css

@@ -1 +0,0 @@
-@layer reset {}