@ui0/theme 0.0.0-stage → 0.1.0

package/src/styles/is.scss

@@ -0,0 +1,185 @@
+@mixin notColoredOrFilled {
+  &:not(.filled, .colored) {
+    @content;
+  }
+}
+@mixin notColored {
+  &:not(.colored) {
+    @content;
+  }
+}
+@mixin notColored2 {
+  &:not(.colored2) {
+    @content;
+  }
+}
+@mixin notColored3 {
+  &:not(.colored3) {
+    @content;
+  }
+}
+@mixin notSized {
+  &:not(.sized) {
+    @content;
+  }
+}
+@mixin notBackdrop {
+  &:not(.backdrop) {
+    @content;
+  }
+}
+@mixin notFilled2 {
+  &:not(.filled2) {
+    @content;
+  }
+}
+@mixin notFilled3 {
+  &:not(.filled3) {
+    @content;
+  }
+}
+@mixin notFilled {
+  &:not(.filled) {
+    @content;
+  }
+}
+@mixin notElevated {
+  &:not(.elv) {
+    @content;
+  }
+}
+@mixin notDisabled {
+  &:not(.disabled) {
+    @content;
+  }
+}
+
+@mixin coloredAndFilled {
+  &.colored.filled {
+    @content;
+  }
+}
+@mixin coloredOrFilled {
+  &.colored,
+  &.filled {
+    @content;
+  }
+}
+
+@mixin colored {
+  &.colored {
+    @content;
+  }
+}
+@mixin colored2 {
+  &.colored2 {
+    @content;
+  }
+}
+@mixin colored3 {
+  &.colored3 {
+    @content;
+  }
+}
+@mixin sized {
+  &.sized {
+    @content;
+  }
+}
+@mixin backdrop {
+  &.backdrop {
+    @content;
+  }
+}
+@mixin filled2 {
+  &.filled2 {
+    @content;
+  }
+}
+@mixin filled3 {
+  &.filled3 {
+    @content;
+  }
+}
+@mixin filled {
+  &.filled {
+    @content;
+  }
+}
+@mixin elevated {
+  &.elv {
+    @content;
+  }
+}
+@mixin disabled {
+  &.disabled {
+    @content;
+  }
+}
+
+@mixin rounded {
+  &.rounded {
+    @content;
+  }
+}
+@mixin notRounded {
+  :not(&.rounded) {
+    @content;
+  }
+}
+@mixin roundedLeft {
+  &.rFull,
+  &.rl,
+  &.rt,
+  .bl,
+  .tl {
+    @content;
+  }
+}
+@mixin roundedRight {
+  &.rFull,
+  &.rr,
+  .rt,
+  .br,
+  .tr {
+    @content;
+  }
+}
+@mixin roundedTop {
+  &.rFull,
+  &.rl,
+  .rt,
+  .tl,
+  .tr {
+    @content;
+  }
+}
+@mixin roundedBottom {
+  &.rFull,
+  &.rl,
+  .rb,
+  .bl,
+  .br {
+    @content;
+  }
+}
+@mixin roundedBottom {
+  &.rFull,
+  &.rl,
+  .rb,
+  .bl,
+  .br {
+    @content;
+  }
+}
+
+@mixin dark {
+  :global(.theme_dark) & {
+    @content;
+  }
+}
+@mixin light {
+  :global(.theme_light) & {
+    @content;
+  }
+}

package/src/styles/ripple.scss

@@ -0,0 +1,57 @@
+$timing-in: ease;
+$timing-out: cubic-bezier(0, 0, .2, 1);
+$duration-out: 800ms;
+$duration: 540ms;
+
+@mixin no {
+  &:global(:not(.fx-ripple)) {
+    @content;
+  }
+}
+@mixin root {
+  &:global(.fx-ripple) {
+    @content;
+  }
+}
+@mixin in {
+  @include root {
+    &:global(.fx-ripple-in) {
+      @content;
+    }
+  }
+}
+@mixin out {
+  @include root {
+    &:global(.fx-ripple-out) {
+      @content;
+    }
+  }
+}
+@mixin item {
+  @include root {
+    :global(.fx-ripple-c) :global(.fx-ripple-item) {
+      @content;
+    }
+  }
+}
+@mixin container {
+  @include root {
+    :global(.fx-ripple-c) {
+      @content;
+    }
+  }
+}
+
+@mixin reset {
+  --0-ripple-opacity: 1;
+  --0-ripple-color-value: var(--r-c-f-v, var(--r-c-f-v));
+  --0-ripple-duration-out: 800ms;
+  --0-ripple-duration: 540ms;
+  --0-ripple-gap: 0em;
+  --0-ripple-border-radius: 0.3em;
+
+  --0-ripple-br-tl: var(--0-ripple-border-radius);
+  --0-ripple-br-tr: var(--0-ripple-border-radius);
+  --0-ripple-br-br: var(--0-ripple-border-radius);
+  --0-ripple-br-bl: var(--0-ripple-border-radius);
+}

package/src/styles/theme.scss

@@ -0,0 +1,16 @@
+@use '@ui0/theme/color';
+@mixin isDark {
+  :global(.theme_dark) & {
+    @content;
+  }
+}
+@mixin isLight {
+  :global(.theme_light) & {
+    @content;
+  }
+}
+
+@mixin apply {
+  @include color.use();
+  @include color.apply();
+}

package/src/styles/util.scss

@@ -0,0 +1,78 @@
+@mixin repeat-layer {
+  align-items: inherit;
+  border-radius: inherit;
+  display: inherit;
+  height: 100%;
+  justify-content: inherit;
+  position: inherit;
+  width: 100%;
+  @content;
+}
+@mixin startingStyle {
+  @starting-style {
+    @content
+  }
+}
+@mixin elevator($elevation, $color-value: #000) {
+  $inset: 0;
+  @if $elevation < 0 {
+    $elevation: $elevation * -1;
+    $inset: inset 0;
+  } @else {
+    $inset: 0;
+  }
+  box-shadow: $inset 0px 1px 1px rgba($color-value, 0.1),
+  $inset #{1 * $elevation}px #{3 * $elevation}px rgba($color-value, 0.095),
+  $inset #{1.5 * $elevation}px #{1.5 * $elevation}px rgba($color-value, 0.13);
+}
+@mixin pseudobox-props {
+  //background-clip: text;
+  bottom: 0;
+  box-sizing: border-box;
+  border-radius: inherit;
+  content: ' ';
+  height: 100%;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 100%;
+  z-index: -1;
+}
+
+@mixin pseudobox-b {
+  &::before {
+    @include pseudobox-props;
+    @content;
+  }
+}
+
+@mixin pseudobox-a {
+  &::after {
+    @include pseudobox-props;
+    @content;
+  }
+}
+
+@function gradientBackground(
+  $color: --r-c-v,
+  $color2: --r-c2-v,
+  $opacity: 1,
+  $opacity2: 1,
+  $deg: var(--r-gradient-angle)
+) {
+  @return linear-gradient(
+                  $deg,
+                  rgba(var($color), $opacity) 0%,
+                  rgba(var($color), $opacity) 30%,
+                  rgba(var($color2), $opacity2) 65%,
+                  rgba(var($color2), $opacity2) 100%
+  );
+}
+@function gradientBackgroundRipple($opacity: 1, $opacity2: 1) {
+  @return linear-gradient(
+                  135deg,
+                  rgba(var(--r-c-v), $opacity) 40%,
+                  rgba(var(--r-c2-v), $opacity2) 60%
+  );
+}