@rokkit/themes 1.0.0-next.99 → 1.0.1

package/src/base/animation.css

@@ -1,22 +0,0 @@
-/* progress animation */
-@keyframes pendulum {
-  from {
-    left: -50%;
-  }
-  to {
-    left: 100%;
-  }
-}
-
-/* Button and focus animation */
-@keyframes button-pop {
-  0% {
-    transform: scale(var(--btn-focus-scale, 0.95));
-  }
-  40% {
-    transform: scale(1.02);
-  }
-  100% {
-    transform: scale(1);
-  }
-}

package/src/base/atoms.css

@@ -1,58 +0,0 @@
-/* Icon styles */
-icon {
-  @apply min-h-4 h-content;
-}
-icon[role='button'] {
-  @apply p-2 cursor-pointer aspect-square select-none focus:outline;
-}
-icon > i {
-  @apply text-2xl leading-6 aspect-square text-current mx-auto;
-}
-icon.large > i {
-  @apply text-3xl;
-}
-icon.medium > i {
-  @apply text-lg leading-5;
-}
-icon.small > i {
-  @apply leading-4;
-  font-size: 1rem;
-}
-icon.large[role='button'] {
-  @apply w-12 h-12;
-}
-icon.medium[role='button'] {
-  @apply w-8 h-8;
-}
-icon.small[role='button'] {
-  @apply w-6 h-6;
-}
-
-/* Scroll styles */
-scroll {
-  @apply flex flex-col overflow-y-scroll;
-}
-
-/* Square styles */
-square {
-  @apply flex flex-col items-center justify-center h-full min-h-full aspect-square;
-}
-/* Item styles */
-item,
-.item {
-  @apply flex flex-shrink-0 flex-grow-0 cursor-pointer select-none items-center gap-2;
-}
-item p,
-summary p {
-  @apply flex flex-grow;
-}
-
-/* Overlay styles */
-overlay {
-  @apply bg-neutral-inset bg-opacity-50;
-}
-
-/* Checkbox styles */
-checkbox {
-  @apply gap-2;
-}

package/src/base/core.css

@@ -1,92 +0,0 @@
-/* Global styles */
-*:focus {
-  @apply outline outline-2 outline-offset-2 outline-secondary;
-}
-*[tabindex='-1']:focus {
-  @apply outline-none;
-}
-
-/* Body styles */
-body {
-  @apply flex flex-col w-screen overflow-hidden;
-  /* height: var(--viewport-height, 100dvh); */
-  height: 100vh;
-  height: --webkit-fill-available;
-  height: 100dvh;
-  max-height: 100dvh;
-}
-
-/* Link styles */
-a {
-  @apply cursor-pointer text-primary-800 hover:text-secondary-800 visited:text-secondary-700;
-}
-a:focus {
-  @apply outline-none;
-}
-/* Code styles */
-code,
-kbd,
-samp,
-pre {
-  @apply font-mono font-medium;
-}
-
-/* Disabled styles */
-.disabled {
-  @apply text-disabled;
-}
-.disabled input,
-.disabled textarea,
-.disabled select {
-  @apply outline-disabled;
-}
-.disabled {
-  @apply text-disabled;
-}
-.disabled input,
-.disabled textarea,
-.disabled select {
-  @apply outline-disabled;
-}
-
-/* plots*/
-plot {
-  @apply rounded-md bg-neutral-inset p-4;
-}
-g[aria-label='tip'] {
-  --plot-background: var(--neutral-200);
-}
-
-input-field input,
-input-field toggle-switch,
-drop-down {
-  @apply focus:outline-none;
-}
-
-alert,
-error,
-info,
-warning,
-success {
-  @apply px-4 py-2 border rounded select-none cursor-pointer;
-}
-
-checkbox {
-  @apply gap-2;
-}
-
-button:disabled {
-  @apply bg-neutral-muted text-neutral-500 cursor-not-allowed;
-}
-
-cell.cell-type-string {
-  @apply text-left;
-}
-cell.cell-type-integer item p,
-cell.cell-type-number item p {
-  @apply text-right;
-}
-
-cell item {
-  @apply flex w-full;
-}

package/src/base/layout.css

@@ -1,65 +0,0 @@
-container > segment {
-  @apply overflow-hidden h-full;
-}
-
-.three-col,
-.two-col {
-  @apply grid w-full min-h-full overflow-hidden;
-}
-
-.three-col.md {
-  @apply grid-cols-2 grid-rows-2;
-  /* grid-template-columns: repeat(2, 1fr); */
-  /* grid-template-rows: repeat(2, 1fr); */
-  grid-template-areas:
-    'c-1 c-2'
-    'c-1 c-3';
-}
-.three-col.md > .col-1,
-.three-col.lg > .col-1 {
-  grid-area: c-1;
-}
-.three-col.md > .col-2,
-.three-col.lg > .col-2 {
-  grid-area: c-2;
-}
-.three-col.md > .col-3,
-.three-col.lg > .col-3 {
-  grid-area: c-3;
-}
-.three-col.lg {
-  @apply grid-cols-5 grid-rows-2;
-  /* grid-template-columns: repeat(5, 1fr); */
-  /* grid-template-rows: repeat(2, 1fr); */
-  grid-template-areas:
-    'c-1 c-1 c-2 c-2 c-2'
-    'c-1 c-1 c-3 c-3 c-3';
-}
-.three-col.sm,
-.two-col.sm {
-  @apply grid-cols-1 grid-rows-1;
-}
-
-.two-col.md {
-  @apply grid-rows-1 grid-cols-2;
-  /* grid-template-columns: repeat(2, 1fr); */
-  grid-template-areas: 'c-1 c-2';
-}
-.two-col.lg {
-  @apply grid-rows-1 grid-cols-5;
-  /* grid-template-columns: repeat(5, 1fr); */
-  grid-template-areas: 'c-1 c-1 c-2 c-2 c-2';
-}
-
-.two-col.md > .col-1,
-.two-col.lg > .col-1 {
-  grid-area: c-1;
-}
-.two-col.md > .col-2,
-.two-col.lg > .col-2 {
-  grid-area: c-2;
-}
-.two-col.md > .col-3,
-.two-col.lg > .col-3 {
-  display: none;
-}

package/src/base/molecules.css

@@ -1,126 +0,0 @@
-/* Input range styles */
-input-range range-track {
-  @apply h-1 mt-3 relative;
-}
-input-range range-track range-track-bar {
-  @apply bg-neutral-subtle border-neutral-muted rounded-full;
-}
-input-range range-track selected {
-  @apply top-0px bottom-0px;
-}
-input-range range-track thumb {
-  @apply rounded-full;
-}
-input-range thumb {
-  @apply -top-1.5 bg-secondary shadow-xl border border-secondary;
-}
-input-range thumb.sliding::before {
-  content: '';
-  @apply absolute left-0 top-0 right-0 bottom-0 bg-secondary-400 opacity-30 rounded-full;
-  transform: scale(2, 2);
-}
-
-/* Bookend styles */
-.bookend range-track range-track-bar::before,
-.bookend range-track range-track-bar::after {
-  content: '';
-  @apply absolute w-1px rounded-full -top-2 -bottom-2 bg-gray-300;
-}
-.bookend range-track range-track-bar::before {
-  @apply -left-1px;
-}
-.bookend range-track range-track-bar::after {
-  @apply -right-2px;
-}
-
-/* Input range tick styles */
-input-range tick {
-  grid-template-rows: 7px auto;
-}
-input-range tick tick-bar {
-  @apply border-neutral-600 h-full;
-}
-input-range tick p {
-  @apply items-top text-neutral-600 leading-tight;
-  font-size: 8px;
-}
-
-/* Calendar styles */
-calendar {
-  @apply rounded-md overflow-hidden shadow-lg;
-}
-calendar month-year {
-  @apply bg-secondary-400 text-white;
-}
-calendar cal-body days-of-week p,
-calendar cal-body days-of-month p {
-  @apply h-8 w-8 text-xs;
-}
-calendar cal-body days-of-week p.weekend,
-calendar cal-body days-of-month p.weekend,
-calendar cal-body days-of-month p.holiday {
-  @apply text-primary-700;
-}
-calendar cal-body days-of-month {
-  @apply gap-2px;
-}
-day-of-month {
-  @apply hover:bg-secondary-200 hover:rounded-full;
-}
-day-of-month[aria-selected='true'] {
-  @apply bg-secondary text-white rounded-full;
-}
-
-/* Form styles */
-form {
-  @apply flex flex-col gap-4;
-}
-field-layout.vertical {
-  @apply flex flex-col gap-2;
-}
-field-layout.horizontal {
-  @apply flex flex-col gap-2 md:flex-row md:gap-4;
-}
-selected-item item {
-  @apply flex-grow;
-}
-input-field {
-  @apply w-full m-0 py-1;
-}
-input-field input,
-input-field textarea,
-input-field select,
-input-field > field > :not(icon) {
-  @apply px-3;
-  @apply flex-grow outline-none min-h-9 leading-loose;
-  @apply bg-neutral-subtle text-neutral-800;
-}
-input-field > label {
-  @apply uppercase text-xs;
-  @apply leading-loose;
-}
-input-field > label.required::after {
-  content: ' *';
-  @apply state-danger;
-}
-
-radio-group label {
-  @apply uppercase cursor-pointer;
-}
-/* Progress bar styles */
-progress-bar {
-  @apply bg-neutral-muted border border-neutral-subtle;
-}
-progress-bar value-bar {
-  @apply bg-primary;
-}
-
-.indeterminate value-bar {
-  position: absolute;
-  bottom: 0;
-  top: 0;
-  /* Move the bar infinitely */
-  animation-duration: 2s;
-  animation-iteration-count: infinite;
-  animation-name: pendulum;
-}

package/src/base/organisms.css

@@ -1,26 +0,0 @@
-input-select,
-drop-down {
-  @apply overflow-visible cursor-pointer;
-}
-
-input-field field {
-  @apply gap-1px;
-}
-input-field field icon {
-  @apply w-9 h-9 bg-neutral-subtle text-neutral-800;
-}
-
-input-field > field > input-select {
-  @apply px-0;
-}
-
-input-select selected-item > icon,
-drop-down > button > span > icon {
-  @apply w-9 h-full;
-}
-input-select > selected-item,
-drop-down > button > span {
-  /* @apply bg-neutral-base pl-3; */
-  @apply pl-3 min-h-9 gap-2 items-center normal-case;
-  @apply rounded text-neutral-800;
-}

package/src/base/scrollbar.css

@@ -1,16 +0,0 @@
-/* Scrollbar styles */
-/* Firefox */
-* {
-  scrollbar-width: thin;
-  scrollbar-color: rgba(0, 0, 0, 0.5) transparent;
-}
-/* For Webkit browsers */
-::-webkit-scrollbar:horizontal {
-  @apply max-h-2;
-}
-::-webkit-scrollbar:vertical {
-  @apply max-w-2;
-}
-::-webkit-scrollbar-thumb {
-  @apply rounded-full rgba(0,0,0,0.5);
-}

package/src/base.css

@@ -1,11 +0,0 @@
-@import './base/core.css';
-@import './base/scrollbar.css';
-@import './base/atoms.css';
-@import './base/molecules.css';
-@import './base/organisms.css';
-@import './base/layout.css';
-@import './base/table.css';
-@import './base/tree.css';
-@import './base/carousel.css';
-@import './base/animation.css';
-@import './base/alert.css';

package/src/constants.js

@@ -1,8 +0,0 @@
-import { themeColors, themeRules } from '@rokkit/core'
-export { defaultStateIcons, defaultIcons } from '@rokkit/core'
-export const defaultThemeColors = themeColors()
-
-export const palettes = {
-	rokkit: themeRules(),
-	'sea-green': themeRules('sea-green', { primary: 'teal', secondary: 'sky', accent: 'lime' })
-}