@rokkit/themes 1.0.0-next.124 → 1.0.0-next.127

package/src/material/base.css

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

package/src/material/form.css

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

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'; */
-
-[data-style='minimal'] rk-icon[role='button'] {
-  @apply text-surface-z3 hover:text-secondary-600 focus:outline-secondary-600 focus:m-1px focus:rounded;
-}
-[data-style='minimal'] button:disabled > rk-icon {
-  @apply text-surface-z2 hover:text-surface-z2 cursor-not-allowed;
-}

package/src/minimal/form.css

@@ -1,87 +0,0 @@
-[data-style='minimal'] button {
-  @apply select-none rounded px-4 leading-loose;
-  @apply bg-surface-z3 border-surface-z3 border;
-}
-[data-style='minimal'] button rk-icon-left,
-[data-style='minimal'] button rk-icon-right {
-  @apply flex aspect-square h-8 flex-col items-center justify-center;
-}
-[data-style='minimal'] button rk-icon {
-  @apply text-2xl;
-}
-
-[data-style='minimal'] .is-primary {
-  @apply bg-secondary text-white;
-}
-[data-style='minimal'] button p {
-  @apply flex flex-grow px-2;
-}
-
-[data-style='minimal'] rk-button-group {
-  @apply gap-1px flex justify-center rounded-sm;
-}
-[data-style='minimal'] rk-button-group button {
-  @apply border-surface-400 rounded-none border-none;
-  @apply bg-surface-z2 shadow focus:outline-none;
-  @apply text-surface-800 px-2 text-sm uppercase leading-8;
-}
-[data-style='minimal'] rk-button-group button:not(:last-child) {
-  @apply border-r;
-}
-[data-style='minimal'] rk-button-group button.active {
-  @apply bg-secondary text-white;
-}
-
-[data-style='minimal'] rk-button-group button:first-child {
-  @apply rounded-l-sm;
-}
-[data-style='minimal'] rk-button-group button:last-child {
-  @apply rounded-r-sm;
-}
-
-[data-style='minimal'] rk-input-select {
-  @apply focus:outline-none;
-}
-[data-style='minimal'] rk-input-select > selected-item {
-  @apply min-h-8 cursor-pointer items-center gap-4 pl-2 leading-8;
-  @apply border-b-surface-z3 border-b-2;
-  @apply focus:border-b-secondary-600;
-}
-[data-style='minimal'] rk-input-select:focus > selected-item {
-  @apply border-b-secondary-600 text-secondary-600;
-}
-[data-style='minimal'] rk-input-select:focus square-icon {
-  @apply text-secondary-600;
-}
-[data-style='minimal'] rk-input-select > selected-item > items {
-  @apply flex-grow flex-wrap gap-2;
-}
-[data-style='minimal'] rk-pill {
-  @apply border-surface-400 gap-2 rounded-full border px-2;
-}
-[data-style='minimal'] rk-pill > rk-item {
-  @apply gap-2 leading-6;
-}
-[data-style='minimal'] rk-pill > rk-item > img {
-  @apply h-4 w-4;
-}
-
-[data-style='minimal'] rk-pill > rk-icon {
-  @apply text-sm;
-}
-[data-style='minimal'] rk-input-select rk-scroll {
-  @apply mt-1 shadow-lg;
-}
-
-[data-style='minimal'] button[role='switch'] {
-  @apply h-8 min-h-6 w-16 rounded-full p-0;
-  @apply bg-surface-z2 border-surface-z2 border;
-}
-
-[data-style='minimal'] button[role='switch'] > rk-mark {
-  @apply bg-secondary top-0.75 h-6 w-6 rounded-full;
-}
-
-[data-style='minimal'] rk-progress-bar rk-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-z2: #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-z2: #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,
-  surface: #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%;
-    --surface-hue: 233;
-    --surface-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 */
-[data-style='rokkit'] rk-alert-list {
-  @apply right-8 top-12 w-80;
-}

package/src/rokkit/atoms.css

@@ -1,52 +0,0 @@
-/* Zebra styles */
-[data-style='rokkit'] .zebra rk-item,
-[data-style='rokkit'] .zebra rk-list-item {
-  @apply even:bg-surface-zebra hover:bg-surface-50;
-}
-
-/* Styles for input[type='number'] */
-[data-style='rokkit'] input[type='number'] {
-  @apply text-right;
-}
-[data-style='rokkit'] input[type='number']::-webkit-inner-spin-button,
-[data-style='rokkit'] input[type='number']::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-}
-
-[data-style='rokkit'] rk-progress-bar rk-value-bar {
-  @apply from-primary-500 to-secondary-500 text-surface-100 dark:text-surface-800 bg-gradient-to-r;
-}
-
-/* Styles for 'searchable' class */
-[data-style='rokkit'] .searchable input {
-  @apply border-surface-z2 border;
-}
-[data-style='rokkit'] a.button {
-  @apply px-4 no-underline;
-}
-[data-style='rokkit'] a {
-  @apply text-primary-800 cursor-pointer underline underline-offset-4;
-}
-[data-style='rokkit'] a:hover {
-  @apply text-secondary-700 cursor-pointer;
-}
-[data-style='rokkit'] a:visited {
-  @apply text-primary-700;
-}
-[data-style='rokkit'] a:focus {
-  @apply outline-none;
-}
-
-[data-style='rokkit'] [aria-current='true'] a {
-  @apply text-primary-100;
-}
-[data-style='rokkit'] [aria-current='true'] a:visited {
-  @apply text-primary-100;
-}
-[data-style='rokkit'] [aria-current='true'] a:hover {
-  @apply text-primary-100;
-}
-
-[data-style='rokkit'] .dark ::-webkit-calendar-picker-indicator {
-  filter: invert(1);
-}

package/src/rokkit/carousel.css

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

package/src/rokkit/layout.css

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

package/src/rokkit/molecules.css

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