@rokkit/themes 1.0.0-next.99 → 1.0.2

package/src/material/base.css

@@ -1,12 +0,0 @@
-@import '../base.css';
-
-.material icon[role='button'] {
-  @apply text-neutral-muted focus:rounded hover:text-primary focus:outline-primary focus:m-1px;
-}
-.material icon.disabled[role='button'] {
-  @apply text-neutral-subtle hover:text-neutral-subtle cursor-not-allowed;
-}
-
-.material * {
-  @apply focus:outline-primary-400;
-}

package/src/material/form.css

@@ -1,30 +0,0 @@
-.material field-layout.vertical {
-  @apply gap-5;
-}
-
-.material button,
-.material .button {
-  @apply py-2 px-4 rounded bg-neutral-subtle uppercase;
-}
-.material button-group {
-  @apply flex justify-center rounded-sm shadow;
-}
-.material .is-primary {
-  @apply bg-primary text-white;
-}
-
-.material button-group > button {
-  @apply border-neutral-400 border-none rounded-none;
-  @apply bg-neutral-subtle focus:outline-none;
-  @apply uppercase text-sm text-neutral-800;
-}
-.material button-group > button:not(:last-child) {
-  @apply border-r;
-}
-.material button-group > button.active {
-  @apply bg-primary text-white;
-}
-
-.material field > toggle-switch {
-  @apply mx-2 mt-1 mb-2;
-}

package/src/material.css

@@ -1,9 +0,0 @@
-@import './material/base.css';
-/* @import './base/tabs.css'; */
-/* @import './base/dropdown.css'; */
-/* @import './base/states.css'; */
-/* @import './base/calendar.css'; */
-@import './material/input.css';
-@import './material/list.css';
-@import './material/form.css';
-/* @import './base/outline.css'; */

package/src/minimal/base.css

@@ -1,8 +0,0 @@
-/* @import '../base.css'; */
-
-.minimal icon[role='button'] {
-  @apply text-neutral-muted focus:rounded hover:text-secondary-600 focus:outline-secondary-600 focus:m-1px;
-}
-.minimal icon.disabled[role='button'] {
-  @apply text-neutral-subtle hover:text-neutral-subtle cursor-not-allowed;
-}

package/src/minimal/form.css

@@ -1,87 +0,0 @@
-.minimal button {
-  @apply rounded leading-loose select-none px-4;
-  @apply bg-neutral-muted border border-neutral-muted;
-}
-.minimal button icon-left,
-.minimal button icon-right {
-  @apply flex flex-col items-center justify-center h-10 aspect-square;
-}
-.minimal button icon {
-  @apply text-2xl;
-}
-
-.minimal .is-primary {
-  @apply bg-secondary text-white;
-}
-.minimal button p {
-  @apply px-2 flex flex-grow;
-}
-
-.minimal button-group {
-  @apply flex justify-center rounded-sm gap-1px;
-}
-.minimal button-group button {
-  @apply border-neutral-400 border-none rounded-none;
-  @apply bg-neutral-subtle shadow focus:outline-none;
-  @apply uppercase text-sm text-neutral-800 leading-8 px-2;
-}
-.minimal button-group button:not(:last-child) {
-  @apply border-r;
-}
-.minimal button-group button.active {
-  @apply bg-secondary text-white;
-}
-
-.minimal button-group button:first-child {
-  @apply rounded-l-sm;
-}
-.minimal button-group button:last-child {
-  @apply rounded-r-sm;
-}
-
-.minimal input-select {
-  @apply focus:outline-none;
-}
-.minimal input-select > selected-item {
-  @apply leading-8 gap-4 items-center pl-2 min-h-8 cursor-pointer select-none;
-  @apply border-b-2 border-b-neutral-muted;
-  @apply focus:border-b-secondary-600;
-}
-.minimal input-select:focus > selected-item {
-  @apply border-b-secondary-600 text-secondary-600;
-}
-.minimal input-select:focus square-icon {
-  @apply text-secondary-600;
-}
-.minimal input-select > selected-item > items {
-  @apply flex-grow flex-wrap gap-2;
-}
-.minimal pill {
-  @apply gap-2 rounded-full border border-neutral-400 px-2;
-}
-.minimal pill > item {
-  @apply gap-2 leading-6;
-}
-.minimal pill > item > img {
-  @apply w-4 h-4;
-}
-
-.minimal pill > icon {
-  @apply text-sm;
-}
-.minimal input-select scroll {
-  @apply mt-1 shadow-lg;
-}
-
-.minimal button[role='switch'] {
-  @apply rounded-full p-0 min-h-6 h-8 w-16;
-  @apply bg-neutral-subtle border border-neutral-subtle;
-}
-
-.minimal button[role='switch'] > mark {
-  @apply rounded-full w-6 h-6 bg-secondary top-0.75;
-}
-
-.minimal progress-bar value-bar {
-  @apply bg-secondary;
-}

package/src/minimal.css

@@ -1,11 +0,0 @@
-@import './base.css';
-
-@import './minimal/base.css';
-/* @import './base/states.css'; */
-/* @import './base/calendar.css'; */
-
-@import './minimal/input.css';
-@import './minimal/list.css';
-@import './minimal/tabs.css';
-@import './minimal/form.css';
-/* @import './base/outline.css'; */

package/src/mixins/mixins.scss

@@ -1,66 +0,0 @@
-@mixin set-theme-colors($theme-colors, $mode, $values: null) {
-  @each $name, $color in $theme-colors {
-    $hue: hue($color);
-    $saturation: saturation($color);
-    @if $values !== null {
-      $start: if($mode === 'dark', length($values), 1);
-      $offset: if($mode === 'dark', -1, 1);
-      @for $i from 0 to length($values) - 1 {
-        $index: $start + $offset * $i;
-        $lightness: nth($values, $index);
-        $variable: '--#{$name}-#{50 + ($i) * 100}';
-        #{$variable}: hsl($hue, $saturation, $lightness);
-      }
-    } @else {
-      @for $i from 0 to 9 {
-        $lightness: if($mode === 'dark', $i * 10%, 100 - $i * 10%);
-        $variable: '--#{$name}-#{50 + ($i) * 100}';
-        #{$variable}: hsl($hue, $saturation, $lightness);
-      }
-    }
-  }
-}
-
-/* light theme syntax colors */
-@mixin light-mode-syntax-colors {
-  --code-bg: #f3f4f6;
-  --code-fill: #f3f4f6;
-  --code-normal: #333333; /*hsl(45, 7%, 45%)*/
-  --code-string: hsl(41, 37%, 45%); /*#183691 */
-  --code-number: hsl(102, 27%, 50%); /* #0086b3;*/
-  --code-atrule: var(--code-string);
-  --code-keyword: hsl(204, 58%, 45%); /* #795da3;*/
-  --code-comment: #969896; /*hsl(210, 25%, 60%)*/
-  --code-property: #63a35c;
-  --code-selector: var(--code-keyword);
-  --code-operator: hsl(19, 67%, 45%);
-  --code-function: hsl(19, 67%, 45%); /* #a71d5d; */
-
-  --code-gutter-marker: black;
-  --code-gutter-subtle: #999;
-  --code-cursor: #24292e;
-  --code-cursor-block: rgba(20, 255, 20, 0.5);
-  --code-linenumbers: rgba(27, 31, 35, 0.3);
-}
-
-/* one dark theme syntax colors */
-@mixin dark-mode-syntax-colors {
-  --code-bg: #282c34;
-  --code-fill: #282c34;
-  --code-normal: #e06c75; /*#ABB2BF;*/
-  --code-string: #98c379;
-  --code-number: #d19a66;
-  --code-atrule: #61afef;
-  --code-keyword: #c678dd;
-  --code-comment: #5c6370;
-  --code-property: #d19a66;
-  --code-selector: #e06c75;
-  --code-operator: #56b6c2;
-  --code-function: #61afef;
-
-  --code-gutter-marker: black;
-  --code-gutter-subtle: #999;
-  --code-cursor: #24292e;
-  --code-cursor-block: rgba(20, 255, 20, 0.5);
-  --code-linenumbers: rgba(27, 31, 35, 0.3);
-}

package/src/mixins/palette.scss

@@ -1,48 +0,0 @@
-@import './mixins.scss';
-
-$theme-colors: (
-  primary: #fb923c,
-  secondary: #ef5da8,
-  accent: #eb479c,
-  neutral: #262730
-);
-
-$lightness: (95%, 90%, 85%, 80%, 70%, 60%, 50%, 40%, 30%, 20%);
-
-@layer base {
-  :root {
-    --primary-hue: 25;
-    --primary-saturation: 95%;
-    --secondary-hue: 329;
-    --secondary-saturation: 80%;
-    --accent-hue: 329;
-    --accent-saturation: 80%;
-    --neutral-hue: 233;
-    --neutral-saturation: 11.9%;
-
-    --tab-size: 2;
-  }
-
-  .light {
-    @include set-theme-colors($theme-colors, 'light', $lightness);
-    @include light-mode-syntax-colors();
-  }
-  .dark {
-    @include set-theme-colors($theme-colors, 'dark', $lightness);
-    @include dark-mode-syntax-colors();
-  }
-
-  @media (prefers-color-scheme: light) {
-    body:not(.dark) {
-      @include set-theme-colors($theme-colors, 'light', $lightness);
-      @include light-mode-syntax-colors();
-    }
-  }
-
-  @media (prefers-color-scheme: dark) {
-    body:not(.light) {
-      @include set-theme-colors($theme-colors, 'dark', $lightness);
-      @include dark-mode-syntax-colors();
-    }
-  }
-}

package/src/prism.css

@@ -1,102 +0,0 @@
-code,
-code[class*='language-'],
-pre[class*='language-'] {
-  background-color: var(--code-fill);
-  color: var(--code-normal);
-  text-align: left;
-  white-space: pre;
-  word-spacing: normal;
-  tab-size: 2;
-  hyphens: none;
-  font-variant-ligatures: common-lig-values; /* common-ligatures; */
-  line-height: 1.4;
-  direction: ltr;
-  cursor: text;
-  @apply font-mono text-xs;
-}
-
-pre[class*='language-'] {
-  overflow: auto;
-  padding: 1.2em;
-}
-
-/* p code,
-li code,
-table code {
-	margin: 0;
-	padding: 0.2em 0;
-} */
-p code:before,
-p code:after,
-li code:before,
-li code:after,
-table code:before,
-table code:after {
-  letter-spacing: -0.2em;
-  content: '\00a0';
-  @apply rounded-sm;
-}
-
-:not(pre) > code {
-  @apply rounded-md p-1;
-}
-:not(pre) > code[class*='language-'] {
-  @apply rounded-sm;
-}
-
-.token.comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-  color: var(--code-comment);
-  font-style: oblique;
-}
-.token.punctuation,
-.token.string,
-.token.attr-value {
-  color: var(--code-string);
-}
-
-.token.property,
-.token.tag {
-  color: var(--code-property);
-}
-.token.boolean,
-.token.number {
-  color: var(--code-number);
-}
-.token.selector,
-.token.attr-name,
-.token.attr-value .punctuation:first-child,
-.token.regex,
-.token.important {
-  color: var(--code-selector);
-}
-
-.token.operator,
-.token.entity,
-.token.url,
-.language-css .token.string {
-  color: var(--code-operator);
-}
-
-.token.atrule {
-  color: var(--code-atrule);
-}
-.token.keyword {
-  color: var(--code-keyword);
-  font-style: italic;
-}
-.token.function {
-  color: var(--code-function);
-}
-.token.entity {
-  cursor: help;
-}
-
-.token.italic {
-  font-style: italic;
-}
-.namespace {
-  opacity: 0.7;
-}

package/src/rokkit/alert.css

@@ -1,4 +0,0 @@
-/* Styles for 'alert-list' class */
-.rokkit alert-list {
-  @apply top-12 right-8 w-80;
-}

package/src/rokkit/atoms.css

@@ -1,69 +0,0 @@
-/* General styles */
-.rokkit {
-  @apply select-none;
-}
-
-/* Zebra styles */
-.rokkit .zebra item {
-  @apply even:bg-neutral-zebra hover:bg-neutral-50;
-}
-
-/* Styles for 'icon' class */
-.rokkit icon:not([role='button']) {
-  @apply focus:outline-none text-neutral-700;
-}
-.rokkit icon[role='button'] {
-  @apply text-neutral-700 focus:rounded hover:text-secondary rounded-md;
-}
-.rokkit icon[role='button']:focus {
-  @apply outline-none bg-gradient-to-r from-primary to-secondary text-neutral-200 dark:text-neutral-800;
-}
-.rokkit icon.disabled[role='button'] {
-  @apply text-neutral-subtle hover:text-neutral-subtle cursor-not-allowed;
-}
-
-/* Styles for input[type='number'] */
-.rokkit input[type='number'] {
-  @apply text-right;
-}
-.rokkit input[type='number']::-webkit-inner-spin-button,
-.rokkit input[type='number']::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-}
-
-.rokkit progress-bar value-bar {
-  @apply bg-gradient-to-r from-primary to-secondary text-neutral-subtle dark:text-neutral-800;
-}
-
-/* Styles for 'searchable' class */
-.searchable input {
-  @apply border border-neutral-subtle;
-}
-
-.rokkit a {
-  @apply text-primary-800 cursor-pointer underline underline-offset-4;
-  /* text-underline-offset: 0.25rem; */
-}
-.rokkit a:hover {
-  @apply text-secondary-700 cursor-pointer;
-}
-.rokkit a:visited {
-  @apply text-primary-700;
-}
-.rokkit a:focus {
-  @apply outline-none;
-}
-
-.rokkit [aria-current='true'] a {
-  @apply text-primary-100;
-}
-.rokkit [aria-current='true'] a:visited {
-  @apply text-primary-100;
-}
-.rokkit [aria-current='true'] a:hover {
-  @apply text-primary-100;
-}
-
-.rokkit.dark ::-webkit-calendar-picker-indicator {
-  filter: invert(1);
-}

package/src/rokkit/carousel.css

@@ -1,19 +0,0 @@
-carousel slide {
-  @apply items-center min-h-100 gap-3 px-12;
-}
-carousel slide > img {
-  @apply w-80 h-80 object-cover;
-}
-carousel slide > p {
-  @apply text-2xl text-center;
-}
-carousel dot-nav {
-  @apply flex h-4 w-full gap-2 justify-center;
-}
-carousel dot {
-  /* @apply block h-4 w-4 p-0 m-0 text-xs rounded-full bg-neutral-subtle cursor-pointer focus:outline-none; */
-  @apply bg-gradient-to-r from-neutral-subtle to-neutral-subtle;
-}
-carousel dot[aria-checked='true'] {
-  @apply bg-gradient-to-r from-primary to-secondary;
-}

package/src/rokkit/layout.css

@@ -1,17 +0,0 @@
-/* Styles for 'toggle-switch' */
-.rokkit field toggle-switch:focus-within {
-  @apply outline-none;
-}
-.rokkit field toggle-switch {
-  @apply min-h-10 items-center justify-center px-1 border-none rounded-sm;
-}
-.rokkit field toggle-switch item {
-  @apply leading-loose rounded-sm;
-}
-.rokkit field toggle-switch item p {
-  @apply justify-center;
-}
-
-.rokkit .horizontal > field radio-group {
-  @apply md:flex-row md:gap-4;
-}

package/src/rokkit/molecules.css

@@ -1,119 +0,0 @@
-/* Styles for 'input-range' class */
-.rokkit input-range range-track {
-  @apply h-2 mt-2 relative;
-}
-.rokkit input-range range-track range-track-bar {
-  @apply bg-neutral-muted border box-border border-neutral-muted rounded-full;
-}
-.rokkit input-range range-track selected-bar {
-  @apply border top-0px bottom-0px bg-gradient-to-r from-primary to-secondary border-secondary rounded-full;
-}
-.rokkit input-range range-track thumb {
-  @apply rounded-sm focus:outline-none;
-}
-/* .rokkit input-range tick p {
-  @apply text-neutral-800;
-} */
-.rokkit .bookend range-track range-track-bar::before,
-.rokkit .bookend range-track range-track-bar::after {
-  content: '';
-  @apply absolute w-1px rounded-full -top-2 -bottom-2 bg-gray-300;
-}
-.rokkit .bookend range-track range-track-bar::before {
-  @apply -left-1px;
-}
-.rokkit .bookend range-track range-track-bar::after {
-  @apply -right-2px;
-}
-
-/* Styles for 'tick' class */
-/* .rokkit tick {
-  @apply h-6;
-} */
-.rokkit tick tick-bar {
-  @apply border-neutral h-full;
-}
-.rokkit tick p {
-  @apply items-top text-neutral-600;
-  font-size: 8px;
-}
-
-/* Styles for 'thumb' class */
-.rokkit thumb {
-  @apply bg-gradient-to-r from-primary to-secondary border-secondary shadow-xl border;
-}
-.rokkit thumb.sliding::before {
-  content: '';
-  @apply absolute left-0 top-0 right-0 bottom-0 bg-secondary  opacity-30 rounded-sm;
-  transform: scale(2, 2);
-}
-
-/* Styles for 'button[role='switch']' class */
-.rokkit button[role='switch'] {
-  @apply rounded-full p-0 min-h-6 h-8 w-16;
-  @apply bg-neutral-subtle border border-neutral-subtle;
-}
-.rokkit button[role='switch'] > mark {
-  @apply rounded-full w-6 h-6 top-0.75;
-  @apply bg-gradient-to-r from-primary to-secondary;
-}
-
-/* Styles for 'rating' class */
-.rokkit rating {
-  @apply text-neutral-600 text-xl h-9 justify-center rounded focus:outline focus:outline-secondary;
-}
-.rokkit rating > icon {
-  @apply w-8;
-}
-.rokkit rating:focus-within icon[aria-checked='true'] {
-  @apply text-primary;
-}
-.rokkit rating icon.hovering > i {
-  @apply text-secondary;
-}
-
-/* Pill styles */
-.rokkit .pill {
-  @apply rounded-full bg-neutral-inset border-neutral-subtle border px-2 py-1 flex-grow-0;
-}
-.rokkit .pill > icon[role='button'] {
-  @apply rounded-full w-5 h-5 hover:bg-neutral-muted hover:text-current focus:rounded-full focus:m-0;
-}
-
-.rokkit .pill > item {
-  @apply gap-2 leading-6 px-2;
-}
-.rokkit .pill > item > img {
-  @apply w-4 h-4;
-}
-
-/* Styles for 'item' class */
-.rokkit item {
-  @apply flex flex-shrink items-center gap-1;
-}
-.rokkit item > p {
-  @apply flex-shrink text-ellipsis;
-}
-
-/* Image and link styles */
-.rokkit item > img,
-.rokkit item > a > img {
-  @apply w-6 h-6;
-}
-.rokkit item > a {
-  @apply gap-2;
-}
-.rokkit node item {
-  @apply px-1 gap-2;
-}
-/* Crumbs styles */
-.rokkit crumbs {
-  @apply flex-grow gap-1;
-}
-.rokkit crumbs crumb.is-selected {
-  @apply text-secondary-700;
-}
-
-.rokkit day-of-month[aria-selected='true'] {
-  @apply bg-gradient-to-r from-primary to-secondary text-neutral-200 dark:text-neutral-800;
-}