cck-ui 0.0.1

package/theme-slate/src/common/var.scss

@@ -0,0 +1,179 @@
+@use 'sass:math';
+@use 'sass:map';
+@use 'sass:color';
+
+@use '../mixins/function.scss' as *;
+
+$theme-colors: (
+  'dark': (
+    #c9c9c9,
+    #b8b8b8,
+    #828282,
+    #696969,
+    #424242,
+    #3b3b3b,
+    #2e2e2e,
+    #242424,
+    #1f1f1f,
+    #141414
+  ),
+  'gray': (
+    #f8f9fa,
+    #f1f3f5,
+    #e9ecef,
+    #dee2e6,
+    #ced4da,
+    #adb5bd,
+    #868e96,
+    #495057,
+    #343a40,
+    #212529
+  ),
+  'red': (
+    #fff5f5,
+    #ffe3e3,
+    #ffc9c9,
+    #ffa8a8,
+    #ff8787,
+    #ff6b6b,
+    #fa5252,
+    #f03e3e,
+    #e03131,
+    #c92a2a
+  ),
+  'pink': (
+    #fff0f6,
+    #ffdeeb,
+    #fcc2d7,
+    #faa2c1,
+    #f783ac,
+    #f06595,
+    #e64980,
+    #d6336c,
+    #c2255c,
+    #a61e4d
+  ),
+  'grape': (
+    #f8f0fc,
+    #f3d9fa,
+    #eebefa,
+    #e599f7,
+    #da77f2,
+    #cc5de8,
+    #be4bdb,
+    #ae3ec9,
+    #9c36b5,
+    #862e9c
+  ),
+  'violet': (
+    #f3f0ff,
+    #e5dbff,
+    #d0bfff,
+    #b197fc,
+    #9775fa,
+    #845ef7,
+    #7950f2,
+    #7048e8,
+    #6741d9,
+    #5f3dc4
+  ),
+  'indigo': (
+    #edf2ff,
+    #dbe4ff,
+    #bac8ff,
+    #91a7ff,
+    #748ffc,
+    #5c7cfa,
+    #4c6ef5,
+    #4263eb,
+    #3b5bdb,
+    #364fc7
+  ),
+  'blue': (
+    #e7f5ff,
+    #d0ebff,
+    #a5d8ff,
+    #74c0fc,
+    #4dabf7,
+    #339af0,
+    #228be6,
+    #1c7ed6,
+    #1971c2,
+    #1864ab
+  ),
+  'cyan': (
+    #e3fafc,
+    #c5f6fa,
+    #99e9f2,
+    #66d9e8,
+    #3bc9db,
+    #22b8cf,
+    #15aabf,
+    #1098ad,
+    #0c8599,
+    #0b7285
+  ),
+  'teal': (
+    #e6fcf5,
+    #c3fae8,
+    #96f2d7,
+    #63e6be,
+    #38d9a9,
+    #20c997,
+    #12b886,
+    #0ca678,
+    #099268,
+    #087f5b
+  ),
+  'green': (
+    #ebfbee,
+    #d3f9d8,
+    #b2f2bb,
+    #8ce99a,
+    #69db7c,
+    #51cf66,
+    #40c057,
+    #37b24d,
+    #2f9e44,
+    #2b8a3e
+  ),
+  'lime': (
+    #f4fce3,
+    #e9fac8,
+    #d8f5a2,
+    #c0eb75,
+    #a9e34b,
+    #94d82d,
+    #82c91e,
+    #74b816,
+    #66a80f,
+    #5c940d
+  ),
+  'yellow': (
+    #fff9db,
+    #fff3bf,
+    #ffec99,
+    #ffe066,
+    #ffd43b,
+    #fcc419,
+    #fab005,
+    #f59f00,
+    #f08c00,
+    #e67700
+  ),
+  'orange': (
+    #fff4e6,
+    #ffe8cc,
+    #ffd8a8,
+    #ffc078,
+    #ffa94d,
+    #ff922b,
+    #fd7e14,
+    #f76707,
+    #e8590c,
+    #d9480f
+  )
+);
+
+$color-white: #fff;
+$color-black: #000;

package/theme-slate/src/common.scss

@@ -0,0 +1,9 @@
+.c-focus-auto:focus-visible,
+.c-focus-always:focus {
+  outline-offset: calc(0.125rem * var(--c-scale));
+  outline: 2px solid var(--c-primary-color-filled);
+}
+
+.c-active:active {
+  transform: translateY(calc(0.0625rem * var(--c-scale)));
+}

package/theme-slate/src/icon.scss

@@ -0,0 +1,43 @@
+@use 'mixins/mixins.scss' as *;
+
+.#{$namespace}-icon--right {
+  margin-right: 5px;
+}
+
+.#{$namespace}-icon--left {
+  margin-left: 5px;
+}
+
+.#{$namespace}-icon--loading {
+  animation: rorating 2s linear-infinite;
+}
+
+@keyframes rotating {
+  0% {
+    transform: rotateZ(0deg);
+  }
+  100% {
+    transform: rotateZ(360deg);
+  }
+}
+
+@include b(icon) {
+  --color: inherit;
+  height: 1em;
+  width: 1em;
+  line-height: 1em;
+  display: inline-block;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  fill: currentColor;
+  color: var(--color);
+  font-size: inherit;
+  @include when(loading) {
+    animation: rotating 2s linear infinite;
+  }
+  svg {
+    height: 1em;
+    width: 1em;
+  }
+}

package/theme-slate/src/index.scss

@@ -0,0 +1,4 @@
+@use './base.scss';
+@use './common.scss';
+
+@use './button.scss';

package/theme-slate/src/mixins/_var.scss

@@ -0,0 +1,9 @@
+@use 'sass:map';
+@use 'sass:color';
+
+@use 'config';
+@use 'function' as *;
+
+@mixin set-css-var-value($name, $value) {
+  #{joinVarName($name)}: #{$value};
+}

package/theme-slate/src/mixins/config.scss

@@ -0,0 +1,5 @@
+$namespace: 'c' !default;
+$common-separator: '-' !default;
+$miniui-separator: '__' !default;
+$modifier-separator: '--' !default;
+$state-prefix: 'is-' !default;

package/theme-slate/src/mixins/function.scss

@@ -0,0 +1,11 @@
+@use 'config';
+
+@function joinVarName($list) {
+  $name: '--' + config.$namespace;
+  @each $item in $list {
+    @if $item != '' {
+      $name: $name + '-' + $item;
+    }
+  }
+  @return $name;
+}

package/theme-slate/src/mixins/mixins.scss

@@ -0,0 +1,19 @@
+@forward 'config';
+@use 'config' as *;
+
+$B: null;
+
+@mixin b($block) {
+  $B: $namespace + $common-separator + $block !global;
+  .#{$B} {
+    @content;
+  }
+}
+
+@mixin when($state) {
+  @at-root {
+    &.#{$state-prefix + $state} {
+      @content;
+    }
+  }
+}

package/theme-slate/src/var.scss

@@ -0,0 +1,297 @@
+@use 'sass:list';
+@use 'common/var' as *;
+@use 'mixins/var' as *;
+@use 'mixins/mixins' as *;
+
+:root {
+  --c-scale: 1;
+  --c-cursor-type: default;
+  --c-webkit-font-smoothing: antialiased;
+  --c-moz-font-smoothing: grayscale;
+
+  @include set-css-var-value('color-white', $color-white);
+  @include set-css-var-value('color-black', $color-black);
+
+  --c-line-height: 1.55;
+  --c-font-family:
+    -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial,
+    sans-serif, Apple Color Emoji, Segoe UI Emoji;
+  --c-font-family-monospace:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono,
+    Courier New, monospace;
+  --c-font-family-headings:
+    -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial,
+    sans-serif, Apple Color Emoji, Segoe UI Emoji;
+  --c-heading-font-weight: var(--c-font-weight-bold);
+  --c-heading-text-wrap: wrap;
+  --c-radius-default: calc(0.5rem * var(--c-scale));
+  --c-breakpoint-xs: 36em;
+  --c-breakpoint-sm: 48em;
+  --c-breakpoint-md: 62em;
+  --c-breakpoint-lg: 75em;
+  --c-breakpoint-xl: 88em;
+  --c-spacing-xs: calc(0.625rem * var(--c-scale));
+  --c-spacing-sm: calc(0.75rem * var(--c-scale));
+  --c-spacing-md: calc(1rem * var(--c-scale));
+  --c-spacing-lg: calc(1.25rem * var(--c-scale));
+  --c-spacing-xl: calc(2rem * var(--c-scale));
+  --c-font-size-xs: calc(0.75rem * var(--c-scale));
+  --c-font-size-sm: calc(0.875rem * var(--c-scale));
+  --c-font-size-md: calc(1rem * var(--c-scale));
+  --c-font-size-lg: calc(1.125rem * var(--c-scale));
+  --c-font-size-xl: calc(1.25rem * var(--c-scale));
+  --c-line-height-xs: 1.4;
+  --c-line-height-sm: 1.45;
+  --c-line-height-md: 1.55;
+  --c-line-height-lg: 1.6;
+  --c-line-height-xl: 1.65;
+  --c-shadow-xs:
+    0 calc(0.0625rem * var(--c-scale)) calc(0.1875rem * var(--c-scale))
+      rgba(0, 0, 0, 0.05),
+    0 calc(0.0625rem * var(--c-scale)) calc(0.125rem * var(--c-scale))
+      rgba(0, 0, 0, 0.1);
+  --c-shadow-sm:
+    0 calc(0.0625rem * var(--c-scale)) calc(0.1875rem * var(--c-scale))
+      rgba(0, 0, 0, 0.05),
+    rgba(0, 0, 0, 0.05) 0 calc(0.625rem * var(--c-scale))
+      calc(0.9375rem * var(--c-scale)) calc(-0.3125rem * var(--c-scale)),
+    rgba(0, 0, 0, 0.04) 0 calc(0.4375rem * var(--c-scale))
+      calc(0.4375rem * var(--c-scale)) calc(-0.3125rem * var(--c-scale));
+  --c-shadow-md:
+    0 calc(0.0625rem * var(--c-scale)) calc(0.1875rem * var(--c-scale))
+      rgba(0, 0, 0, 0.05),
+    rgba(0, 0, 0, 0.05) 0 calc(1.25rem * var(--c-scale))
+      calc(1.5625rem * var(--c-scale)) calc(-0.3125rem * var(--c-scale)),
+    rgba(0, 0, 0, 0.04) 0 calc(0.625rem * var(--c-scale))
+      calc(0.625rem * var(--c-scale)) calc(-0.3125rem * var(--c-scale));
+  --c-shadow-lg:
+    0 calc(0.0625rem * var(--c-scale)) calc(0.1875rem * var(--c-scale))
+      rgba(0, 0, 0, 0.05),
+    rgba(0, 0, 0, 0.05) 0 calc(1.75rem * var(--c-scale))
+      calc(1.4375rem * var(--c-scale)) calc(-0.4375rem * var(--c-scale)),
+    rgba(0, 0, 0, 0.04) 0 calc(0.75rem * var(--c-scale))
+      calc(0.75rem * var(--c-scale)) calc(-0.4375rem * var(--c-scale));
+  --c-shadow-xl:
+    0 calc(0.0625rem * var(--c-scale)) calc(0.1875rem * var(--c-scale))
+      rgba(0, 0, 0, 0.05),
+    rgba(0, 0, 0, 0.05) 0 calc(2.25rem * var(--c-scale))
+      calc(1.75rem * var(--c-scale)) calc(-0.4375rem * var(--c-scale)),
+    rgba(0, 0, 0, 0.04) 0 calc(1.0625rem * var(--c-scale))
+      calc(1.0625rem * var(--c-scale)) calc(-0.4375rem * var(--c-scale));
+  --c-radius-xs: calc(0.125rem * var(--c-scale));
+  --c-radius-sm: calc(0.25rem * var(--c-scale));
+  --c-radius-md: calc(0.5rem * var(--c-scale));
+  --c-radius-lg: calc(1rem * var(--c-scale));
+  --c-radius-xl: calc(2rem * var(--c-scale));
+  --c-font-weight-regular: 400;
+  --c-font-weight-medium: 600;
+  --c-font-weight-bold: 700;
+
+  @for $i from 0 to 10 {
+    --c-primary-color-#{$i}: var(--c-color-blue-#{$i});
+  }
+
+  @each $color-name, $color-list in $theme-colors {
+    @for $i from 0 to 10 {
+      $value: list.nth($color-list, $i + 1);
+      --c-color-#{$color-name}-#{$i}: #{$value};
+    }
+  }
+
+  --c-h1-font-size: calc(2.125rem * var(--c-scale));
+  --c-h1-line-height: 1.3;
+  --c-h1-font-weight: var(--c-heading-font-weight);
+  --c-h2-font-size: calc(1.625rem * var(--c-scale));
+  --c-h2-line-height: 1.35;
+  --c-h2-font-weight: var(--c-heading-font-weight);
+  --c-h3-font-size: calc(1.375rem * var(--c-scale));
+  --c-h3-line-height: 1.4;
+  --c-h3-font-weight: var(--c-heading-font-weight);
+  --c-h4-font-size: calc(1.125rem * var(--c-scale));
+  --c-h4-line-height: 1.45;
+  --c-h4-font-weight: var(--c-heading-font-weight);
+  --c-h5-font-size: calc(1rem * var(--c-scale));
+  --c-h5-line-height: 1.5;
+  --c-h5-font-weight: var(--c-heading-font-weight);
+  --c-h6-font-size: calc(0.875rem * var(--c-scale));
+  --c-h6-line-height: 1.5;
+  --c-h6-font-weight: var(--c-heading-font-weight);
+}
+
+:root[data-c-color-scheme='light'],
+:host([data-c-color-scheme='light']) {
+  --c-color-scheme: light;
+  --c-primary-color-contrast: var(--c-color-white);
+  --c-color-bright: var(--c-color-black);
+  --c-color-text: #000;
+  --c-color-body: #fff;
+  --c-color-error: var(--c-color-red-6);
+  --c-color-placeholder: var(--c-color-gray-5);
+  --c-color-anchor: var(--c-color-blue-6);
+  --c-color-default: var(--c-color-white);
+  --c-color-default-hover: var(--c-color-gray-0);
+  --c-color-default-color: var(--c-color-black);
+  --c-color-default-border: var(--c-color-gray-4);
+  --c-color-dimmed: var(--c-color-gray-6);
+  --c-color-disabled: var(--c-color-gray-2);
+  --c-color-disabled-color: var(--c-color-gray-5);
+  --c-color-disabled-border: var(--c-color-gray-3);
+
+  --c-primary-color-filled: var(--c-primary-color-6);
+  --c-primary-color-filled-hover: var(--c-primary-color-7);
+  --c-primary-color-light: var(--c-primary-color-1);
+  --c-primary-color-light-hover: var(--c-primary-color-2);
+  --c-primary-color-light-color: var(--c-primary-color-9);
+  --c-primary-color-outline: var(--c-primary-color-filled);
+  --c-primary-color-outline-hover: var(--c-color-blue-outline-hover);
+
+  @each $name
+    in (
+      'red',
+      'pink',
+      'grape',
+      'violet',
+      'indigo',
+      'blue',
+      'cyan',
+      'teal',
+      'green',
+      'lime',
+      'yellow',
+      'orange',
+      'gray',
+      dark
+    )
+  {
+    --c-color-#{$name}-text: var(--c-color-#{$name}-filled);
+    --c-color-#{$name}-filled: var(--c-color-#{$name}-6);
+    --c-color-#{$name}-filled-hover: var(--c-color-#{$name}-7);
+    --c-color-#{$name}-light: var(--c-color-#{$name}-1);
+    --c-color-#{$name}-light-hover: var(--c-color-#{$name}-2);
+    --c-color-#{$name}-light-color: var(--c-color-#{$name}-9);
+    --c-color-#{$name}-outline: var(--c-color-#{$name}-6);
+  }
+  --c-color-dark-outline-hover: #2e2e2e0d;
+  --c-color-gray-outline-hover: #868e960d;
+  --c-color-red-outline-hover: #fa52520d;
+  --c-color-pink-outline-hover: #e649800d;
+  --c-color-grape-outline-hover: #be4bdb0d;
+  --c-color-violet-outline-hover: #7950f20d;
+  --c-color-indigo-outline-hover: #4c6ef50d;
+  --c-color-blue-outline-hover: #228be60d;
+  --c-color-cyan-outline-hover: #15aabf0d;
+  --c-color-teal-outline-hover: #12b8860d;
+  --c-color-green-outline-hover: #40c0570d;
+  --c-color-lime-outline-hover: #82c91e0d;
+  --c-color-yellow-outline-hover: #fab0050d;
+  --c-color-orange-outline-hover: #fd7e140d;
+}
+
+:root[data-c-color-scheme='dark'],
+:host([data-c-color-scheme='dark']) {
+  --c-color-scheme: dark;
+  --c-primary-color-contrast: var(--c-color-white);
+  --c-primary-color-bright: var(--c-color-white);
+  --c-color-text: var(--c-color-dark-0);
+  --c-color-body: var(--c-color-dark-7);
+  --c-color-error: var(--c-color-red-8);
+  --c-color-placeholder: var(--c-color-dark-3);
+  --c-color-anchor: var(--c-color-blue-4);
+  --c-color-default: var(--c-color-dark-6);
+  --c-color-default-hover: var(--c-color-dark-5);
+  --c-color-default-color: var(--c-color-white);
+  --c-color-default-border: var(--c-color-dark-4);
+  --c-color-dimmed: var(--c-color-dark-2);
+  --c-color-disabled: var(--c-color-dark-6);
+  --c-color-disabled-color: var(--c-color-dark-3);
+  --c-color-disabled-border: var(--c-color-dark-4);
+
+  --c-primary-color-filled: var(--c-primary-color-8);
+  --c-primary-color-filled-hover: var(--c-primary-color-9);
+  --c-primary-color-light: var(--c-primary-color-1);
+  --c-primary-color-light-hover: var(--c-primary-color-2);
+  --c-primary-color-light-color: var(--c-primary-color-4);
+  --c-primary-color-outline: var(--c-primary-color-filled);
+  --c-primary-color-outline-hover: var(--c-color-blue-outline-hover);
+
+  @each $name
+    in (
+      'red',
+      'pink',
+      'grape',
+      'violet',
+      'indigo',
+      'blue',
+      'cyan',
+      'teal',
+      'green',
+      'lime',
+      'yellow',
+      'orange',
+      'gray',
+      'dark'
+    )
+  {
+    --c-color-#{$name}-text: var(--c-color-#{$name}-4);
+    --c-color-#{$name}-filled: var(--c-color-#{$name}-8);
+    --c-color-#{$name}-filled-hover: var(--c-color-#{$name}-9);
+    --c-color-#{$name}-light-color: var(--c-color-#{$name}-0);
+    --c-color-#{$name}-outline: var(--c-color-#{$name}-4);
+  }
+
+  --c-color-dark-light: rgba(10, 10, 10, 1);
+  --c-color-dark-light-hover: rgba(14, 14, 14, 1);
+  --c-color-dark-outline-hover: rgba(66, 66, 66, 0.05);
+
+  --c-color-gray-light: rgba(17, 19, 21, 1);
+  --c-color-gray-light-hover: rgba(23, 26, 29, 1);
+  --c-color-gray-outline-hover: rgba(206, 212, 218, 0.05);
+
+  --c-color-red-light: rgba(101, 21, 21, 1);
+  --c-color-red-light-hover: rgba(141, 29, 29, 1);
+  --c-color-red-outline-hover: rgba(255, 135, 135, 0.05);
+
+  --c-color-pink-light: rgba(83, 15, 39, 1);
+  --c-color-pink-light-hover: rgba(116, 21, 54, 1);
+  --c-color-pink-outline-hover: rgba(247, 131, 172, 0.05);
+
+  --c-color-grape-light: rgba(67, 23, 78, 1);
+  --c-color-grape-light-hover: rgba(94, 32, 109, 1);
+  --c-color-grape-outline-hover: rgba(218, 119, 242, 0.05);
+
+  --c-color-violet-light: rgba(48, 31, 98, 1);
+  --c-color-violet-light-hover: rgba(67, 43, 137, 1);
+  --c-color-violet-outline-hover: rgba(151, 117, 250, 0.05);
+
+  --c-color-indigo-light: rgba(27, 40, 100, 1);
+  --c-color-indigo-light-hover: rgba(38, 55, 139, 1);
+  --c-color-indigo-outline-hover: rgba(116, 143, 252, 0.05);
+
+  --c-color-blue-light: rgba(12, 50, 86, 1);
+  --c-color-blue-light-hover: rgba(17, 70, 120, 1);
+  --c-color-blue-outline-hover: rgba(77, 171, 247, 0.05);
+
+  --c-color-cyan-light: rgba(6, 57, 67, 1);
+  --c-color-cyan-light-hover: rgba(8, 80, 93, 1);
+  --c-color-cyan-outline-hover: rgba(59, 201, 219, 0.05);
+
+  --c-color-teal-light: rgba(4, 64, 46, 1);
+  --c-color-teal-light-hover: rgba(6, 89, 64, 1);
+  --c-color-teal-outline-hover: rgba(56, 217, 169, 0.05);
+
+  --c-color-green-light: rgba(22, 69, 31, 1);
+  --c-color-green-light-hover: rgba(30, 97, 43, 1);
+  --c-color-green-outline-hover: rgba(105, 219, 124, 0.05);
+
+  --c-color-lime-light: rgba(46, 74, 7, 1);
+  --c-color-lime-light-hover: rgba(64, 104, 9, 1);
+  --c-color-lime-outline-hover: rgba(169, 227, 75, 0.05);
+
+  --c-color-yellow-light: rgba(115, 60, 0, 1);
+  --c-color-yellow-light-hover: rgba(161, 83, 0, 1);
+  --c-color-yellow-outline-hover: rgba(255, 212, 59, 0.05);
+
+  --c-color-orange-light: rgba(109, 36, 8, 1);
+  --c-color-orange-light-hover: rgba(152, 50, 11, 1);
+  --c-color-orange-outline-hover: rgba(255, 169, 77, 0.05);
+}