@rokkit/themes 1.0.0-next.100

package/src/mixins/mixins.scss

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

@@ -0,0 +1,48 @@
+@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/palette.css

@@ -0,0 +1,25 @@
+@layer base {
+  :root {
+    --scroll-width: 0.5rem;
+  }
+  /* light theme colors */
+  .light {
+    @apply rokkit-mode-light;
+  }
+  @media (prefers-color-scheme: dark) {
+    body:not(.light) {
+      @apply rokkit-mode-dark;
+    }
+  }
+
+  /* dark theme colors */
+  .dark {
+    @apply rokkit-mode-dark;
+  }
+
+  @media (prefers-color-scheme: light) {
+    body:not(.dark) {
+      @apply rokkit-mode-light;
+    }
+  }
+}

package/src/prism.css

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

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

package/src/rokkit/atoms.css

@@ -0,0 +1,69 @@
+/* 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

@@ -0,0 +1,19 @@
+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/input.css

@@ -0,0 +1,36 @@
+/* Styles for 'input-field' class */
+.rokkit input-field field {
+  @apply p-2px box-border border border-neutral-muted rounded;
+}
+.rokkit input-field input,
+.rokkit input-field textarea,
+.rokkit input-field select {
+  @apply border-0 rounded-sm;
+}
+.rokkit checkbox {
+  @apply outline-none;
+}
+.rokkit input-field > label {
+  @apply text-secondary-600;
+}
+.rokkit input-field field > label {
+  @apply w-full h-full flex items-center text-secondary-600 uppercase text-xs;
+}
+.rokkit input-field:not(.disabled) field:focus-within {
+  @apply border-neutral-base bg-gradient-to-r from-primary to-secondary;
+}
+.rokkit input-field.disabled label {
+  @apply text-neutral-500;
+}
+/* .rokkit input-field.disabled field:focus-within {
+  @apply bg-gradient-to-r from-neutral-subtle to-neutral-subtle;
+} */
+.rokkit input-field > span {
+  @apply border-r border-neutral-muted bg-neutral-base px-1 h-full aspect-square;
+}
+.rokkit input-field message {
+  @apply px-2 py-1 bg-neutral-base rounded;
+}
+.rokkit input-field.fail {
+  @apply bg-error rounded px-2;
+}

package/src/rokkit/layout.css

@@ -0,0 +1,17 @@
+/* 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

@@ -0,0 +1,119 @@
+/* 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;
+}