@rokkit/themes 1.0.0-next.51 → 1.0.0-next.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/themes",
-  "version": "1.0.0-next.51",
+  "version": "1.0.0-next.52",
   "description": "Themes for use with rokkit components.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -13,22 +13,18 @@
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^2.4.6",
-    "@vitest/coverage-v8": "^0.34.5",
-    "@vitest/ui": "~0.34.5",
+    "@vitest/coverage-v8": "^0.34.6",
+    "@vitest/ui": "~0.34.6",
     "jsdom": "^22.1.0",
     "svelte": "^4.2.1",
     "typescript": "^5.2.2",
     "vite": "^4.4.9",
-    "vitest": "~0.34.5",
-    "shared-config": "1.0.0-next.51",
-    "@rokkit/core": "1.0.0-next.51"
+    "vitest": "~0.34.6",
+    "@rokkit/core": "1.0.0-next.52",
+    "shared-config": "1.0.0-next.52"
   },
   "files": [
-    "src/**/*.js",
-    "src/**/*.css",
-    "src/**/*.svelte",
-    "!src/fixtures",
-    "!src/**/*.spec.js"
+    "src"
   ],
   "exports": {
     "./modern.css": "./src/modern.css",

package/src/base/test.py

@@ -0,0 +1,7 @@
+# write a function to generate a fibonaci sequence of n numbers
+
+def fib(n):
+    a, b = 0, 1
+    for i in range(n):
+        print(a)
+        a, b = b, a+b

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,
+  skin: #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%;
+    --skin-hue: 233;
+    --skin-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();
+    }
+  }
+}