@okshaun/components 0.5.8 → 1.0.1

package/dist/styles/recipes/textinput.css

@@ -0,0 +1,87 @@
+@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

@@ -0,0 +1,53 @@
+@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

@@ -0,0 +1,12 @@
+@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

@@ -0,0 +1,125 @@
+@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

@@ -0,0 +1,133 @@
+@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

@@ -0,0 +1,30 @@
+@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

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