@inc2734/unitone-css 0.97.2 → 0.97.3

package/src/utilities/_background-color.scss

@@ -0,0 +1,111 @@
+/**
+ * This color palette is based on Tailwind.
+ * @see https://tailwindcss.com/docs/customizing-colors
+ */
+.-background-color {
+  &\:background { background-color: var(--unitone--color--background); }
+  &\:background-alt { background-color: var(--unitone--color--background-alt); }
+  &\:text { background-color: var(--unitone--color--text); }
+  &\:text-alt { background-color: var(--unitone--color--text-alt); }
+  &\:text-immutable { background-color: var(--unitone--color--text-immutable); }
+
+  &\:white { background-color: var(--unitone--color--white); }
+
+  &\:pale-gray { background-color: var(--unitone--color--pale-gray); }
+  &\:bright-gray { background-color: var(--unitone--color--bright-gray); }
+  &\:light-gray { background-color: var(--unitone--color--light-gray); }
+  &\:gray { background-color: var(--unitone--color--gray); }
+  &\:dark-gray { background-color: var(--unitone--color--dark-gray); }
+  &\:heavy-gray { background-color: var(--unitone--color--heavy-gray); }
+
+  &\:twilight-light { background-color: var(--unitone--color--twilight-light); }
+  &\:twilight { background-color: var(--unitone--color--twilight); }
+  &\:twilight-heavy { background-color: var(--unitone--color--twilight-heavy); }
+  &\:dimmed-light { background-color: var(--unitone--color--dimmed-light); }
+  &\:dimmed { background-color: var(--unitone--color--dimmed); }
+  &\:dimmed-heavy { background-color: var(--unitone--color--dimmed-heavy); }
+
+  &\:pale-red { background-color: var(--unitone--color--pale-red); }
+  &\:bright-red { background-color: var(--unitone--color--bright-red); }
+  &\:light-red { background-color: var(--unitone--color--light-red); }
+  &\:red { background-color: var(--unitone--color--red); }
+  &\:dark-red { background-color: var(--unitone--color--dark-red); }
+  &\:heavy-red { background-color: var(--unitone--color--heavy-red); }
+
+  &\:pale-orange { background-color: var(--unitone--color--pale-orange); }
+  &\:bright-orange { background-color: var(--unitone--color--bright-orange); }
+  &\:light-orange { background-color: var(--unitone--color--light-orange); }
+  &\:orange { background-color: var(--unitone--color--orange); }
+  &\:dark-orange { background-color: var(--unitone--color--dark-orange); }
+  &\:heavy-orange { background-color: var(--unitone--color--heavy-orange); }
+
+  &\:pale-yellow { background-color: var(--unitone--color--pale-yellow); }
+  &\:bright-yellow { background-color: var(--unitone--color--bright-yellow); }
+  &\:light-yellow { background-color: var(--unitone--color--light-yellow); }
+  &\:yellow { background-color: var(--unitone--color--yellow); }
+  &\:dark-yellow { background-color: var(--unitone--color--dark-yellow); }
+  &\:heavy-yellow { background-color: var(--unitone--color--heavy-yellow); }
+
+  &\:pale-lime { background-color: var(--unitone--color--pale-lime); }
+  &\:bright-lime { background-color: var(--unitone--color--bright-lime); }
+  &\:light-lime { background-color: var(--unitone--color--light-lime); }
+  &\:lime { background-color: var(--unitone--color--lime); }
+  &\:dark-lime { background-color: var(--unitone--color--dark-lime); }
+  &\:heavy-lime { background-color: var(--unitone--color--heavy-lime); }
+
+  &\:pale-green { background-color: var(--unitone--color--pale-green); }
+  &\:bright-green { background-color: var(--unitone--color--bright-green); }
+  &\:light-green { background-color: var(--unitone--color--light-green); }
+  &\:green { background-color: var(--unitone--color--green); }
+  &\:dark-green { background-color: var(--unitone--color--dark-green); }
+  &\:heavy-green { background-color: var(--unitone--color--heavy-green); }
+
+  &\:pale-teal { background-color: var(--unitone--color--pale-teal); }
+  &\:bright-teal { background-color: var(--unitone--color--bright-teal); }
+  &\:light-teal { background-color: var(--unitone--color--light-teal); }
+  &\:teal { background-color: var(--unitone--color--teal); }
+  &\:dark-teal { background-color: var(--unitone--color--dark-teal); }
+  &\:heavy-teal { background-color: var(--unitone--color--heavy-teal); }
+
+  &\:pale-cyan { background-color: var(--unitone--color--pale-cyan); }
+  &\:bright-cyan { background-color: var(--unitone--color--bright-cyan); }
+  &\:light-cyan { background-color: var(--unitone--color--light-cyan); }
+  &\:cyan { background-color: var(--unitone--color--cyan); }
+  &\:dark-cyan { background-color: var(--unitone--color--dark-cyan); }
+  &\:heavy-cyan { background-color: var(--unitone--color--heavy-cyan); }
+
+  &\:pale-blue { background-color: var(--unitone--color--pale-blue); }
+  &\:bright-blue { background-color: var(--unitone--color--bright-blue); }
+  &\:light-blue { background-color: var(--unitone--color--light-blue); }
+  &\:blue { background-color: var(--unitone--color--blue); }
+  &\:dark-blue { background-color: var(--unitone--color--dark-blue); }
+  &\:heavy-blue { background-color: var(--unitone--color--heavy-blue); }
+
+  &\:pale-indigo { background-color: var(--unitone--color--pale-indigo); }
+  &\:bright-indigo { background-color: var(--unitone--color--bright-indigo); }
+  &\:light-indigo { background-color: var(--unitone--color--light-indigo); }
+  &\:indigo { background-color: var(--unitone--color--indigo); }
+  &\:dark-indigo { background-color: var(--unitone--color--dark-indigo); }
+  &\:heavy-indigo { background-color: var(--unitone--color--heavy-indigo); }
+
+  &\:pale-violet { background-color: var(--unitone--color--pale-violet); }
+  &\:bright-violet { background-color: var(--unitone--color--bright-violet); }
+  &\:light-violet { background-color: var(--unitone--color--light-violet); }
+  &\:violet { background-color: var(--unitone--color--violet); }
+  &\:dark-violet { background-color: var(--unitone--color--dark-violet); }
+  &\:heavy-violet { background-color: var(--unitone--color--heavy-violet); }
+
+  &\:pale-purple { background-color: var(--unitone--color--pale-purple); }
+  &\:bright-purple { background-color: var(--unitone--color--bright-purple); }
+  &\:light-purple { background-color: var(--unitone--color--light-purple); }
+  &\:purple { background-color: var(--unitone--color--purple); }
+  &\:dark-purple { background-color: var(--unitone--color--dark-purple); }
+  &\:heavy-purple { background-color: var(--unitone--color--heavy-purple); }
+
+  &\:pale-pink { background-color: var(--unitone--color--pale-pink); }
+  &\:bright-pink { background-color: var(--unitone--color--bright-pink); }
+  &\:light-pink { background-color: var(--unitone--color--light-pink); }
+  &\:pink { background-color: var(--unitone--color--pink); }
+  &\:dark-pink { background-color: var(--unitone--color--dark-pink); }
+  &\:heavy-pink { background-color: var(--unitone--color--heavy-pink); }
+}

package/src/utilities/_color.scss

@@ -0,0 +1,111 @@
+/**
+ * This color palette is based on Tailwind.
+ * @see https://tailwindcss.com/docs/customizing-colors
+ */
+.-color {
+  &\:background { color: var(--unitone--color--background); }
+  &\:background-alt { color: var(--unitone--color--background-alt); }
+  &\:text { color: var(--unitone--color--text); }
+  &\:text-alt { color: var(--unitone--color--text-alt); }
+  &\:text-immutable { color: var(--unitone--color--text-immutable); }
+
+  &\:white { color: var(--unitone--color--white); }
+
+  &\:pale-gray { color: var(--unitone--color--pale-gray); }
+  &\:bright-gray { color: var(--unitone--color--bright-gray); }
+  &\:light-gray { color: var(--unitone--color--light-gray); }
+  &\:gray { color: var(--unitone--color--gray); }
+  &\:dark-gray { color: var(--unitone--color--dark-gray); }
+  &\:heavy-gray { color: var(--unitone--color--heavy-gray); }
+
+  &\:twilight-light { color: var(--unitone--color--twilight-light); }
+  &\:twilight { color: var(--unitone--color--twilight); }
+  &\:twilight-heavy { color: var(--unitone--color--twilight-heavy); }
+  &\:dimmed-light { color: var(--unitone--color--dimmed-light); }
+  &\:dimmed { color: var(--unitone--color--dimmed); }
+  &\:dimmed-heavy { color: var(--unitone--color--dimmed-heavy); }
+
+  &\:pale-red { color: var(--unitone--color--pale-red); }
+  &\:bright-red { color: var(--unitone--color--bright-red); }
+  &\:light-red { color: var(--unitone--color--light-red); }
+  &\:red { color: var(--unitone--color--red); }
+  &\:dark-red { color: var(--unitone--color--dark-red); }
+  &\:heavy-red { color: var(--unitone--color--heavy-red); }
+
+  &\:pale-orange { color: var(--unitone--color--pale-orange); }
+  &\:bright-orange { color: var(--unitone--color--bright-orange); }
+  &\:light-orange { color: var(--unitone--color--light-orange); }
+  &\:orange { color: var(--unitone--color--orange); }
+  &\:dark-orange { color: var(--unitone--color--dark-orange); }
+  &\:heavy-orange { color: var(--unitone--color--heavy-orange); }
+
+  &\:pale-yellow { color: var(--unitone--color--pale-yellow); }
+  &\:bright-yellow { color: var(--unitone--color--bright-yellow); }
+  &\:light-yellow { color: var(--unitone--color--light-yellow); }
+  &\:yellow { color: var(--unitone--color--yellow); }
+  &\:dark-yellow { color: var(--unitone--color--dark-yellow); }
+  &\:heavy-yellow { color: var(--unitone--color--heavy-yellow); }
+
+  &\:pale-lime { color: var(--unitone--color--pale-lime); }
+  &\:bright-lime { color: var(--unitone--color--bright-lime); }
+  &\:light-lime { color: var(--unitone--color--light-lime); }
+  &\:lime { color: var(--unitone--color--lime); }
+  &\:dark-lime { color: var(--unitone--color--dark-lime); }
+  &\:heavy-lime { color: var(--unitone--color--heavy-lime); }
+
+  &\:pale-green { color: var(--unitone--color--pale-green); }
+  &\:bright-green { color: var(--unitone--color--bright-green); }
+  &\:light-green { color: var(--unitone--color--light-green); }
+  &\:green { color: var(--unitone--color--green); }
+  &\:dark-green { color: var(--unitone--color--dark-green); }
+  &\:heavy-green { color: var(--unitone--color--heavy-green); }
+
+  &\:pale-teal { color: var(--unitone--color--pale-teal); }
+  &\:bright-teal { color: var(--unitone--color--bright-teal); }
+  &\:light-teal { color: var(--unitone--color--light-teal); }
+  &\:teal { color: var(--unitone--color--teal); }
+  &\:dark-teal { color: var(--unitone--color--dark-teal); }
+  &\:heavy-teal { color: var(--unitone--color--heavy-teal); }
+
+  &\:pale-cyan { color: var(--unitone--color--pale-cyan); }
+  &\:bright-cyan { color: var(--unitone--color--bright-cyan); }
+  &\:light-cyan { color: var(--unitone--color--light-cyan); }
+  &\:cyan { color: var(--unitone--color--cyan); }
+  &\:dark-cyan { color: var(--unitone--color--dark-cyan); }
+  &\:heavy-cyan { color: var(--unitone--color--heavy-cyan); }
+
+  &\:pale-blue { color: var(--unitone--color--pale-blue); }
+  &\:bright-blue { color: var(--unitone--color--bright-blue); }
+  &\:light-blue { color: var(--unitone--color--light-blue); }
+  &\:blue { color: var(--unitone--color--blue); }
+  &\:dark-blue { color: var(--unitone--color--dark-blue); }
+  &\:heavy-blue { color: var(--unitone--color--heavy-blue); }
+
+  &\:pale-indigo { color: var(--unitone--color--pale-indigo); }
+  &\:bright-indigo { color: var(--unitone--color--bright-indigo); }
+  &\:light-indigo { color: var(--unitone--color--light-indigo); }
+  &\:indigo { color: var(--unitone--color--indigo); }
+  &\:dark-indigo { color: var(--unitone--color--dark-indigo); }
+  &\:heavy-indigo { color: var(--unitone--color--heavy-indigo); }
+
+  &\:pale-violet { color: var(--unitone--color--pale-violet); }
+  &\:bright-violet { color: var(--unitone--color--bright-violet); }
+  &\:light-violet { color: var(--unitone--color--light-violet); }
+  &\:violet { color: var(--unitone--color--violet); }
+  &\:dark-violet { color: var(--unitone--color--dark-violet); }
+  &\:heavy-violet { color: var(--unitone--color--heavy-violet); }
+
+  &\:pale-purple { color: var(--unitone--color--pale-purple); }
+  &\:bright-purple { color: var(--unitone--color--bright-purple); }
+  &\:light-purple { color: var(--unitone--color--light-purple); }
+  &\:purple { color: var(--unitone--color--purple); }
+  &\:dark-purple { color: var(--unitone--color--dark-purple); }
+  &\:heavy-purple { color: var(--unitone--color--heavy-purple); }
+
+  &\:pale-pink { color: var(--unitone--color--pale-pink); }
+  &\:bright-pink { color: var(--unitone--color--bright-pink); }
+  &\:light-pink { color: var(--unitone--color--light-pink); }
+  &\:pink { color: var(--unitone--color--pink); }
+  &\:dark-pink { color: var(--unitone--color--dark-pink); }
+  &\:heavy-pink { color: var(--unitone--color--heavy-pink); }
+}

package/src/utilities/_display.scss

@@ -0,0 +1,14 @@
+@each $value in (
+  none,
+  inline,
+  inline-block,
+  block,
+  flex,
+  grid,
+  inline-flex,
+  inline-grid,
+) {
+  .-display\:#{ $value } {
+    display: #{ $value };
+  }
+}

package/src/utilities/_flex-direction.scss

@@ -0,0 +1,10 @@
+@each $value in (
+  row,
+  row-reverse,
+  column,
+  column-reverse
+) {
+  .-flex-direction\:#{ $value } {
+    flex-direction: #{ $value };
+  }
+}

package/src/utilities/_flex-wrap.scss

@@ -0,0 +1,8 @@
+@each $value in (
+  wrap,
+  nowrap
+) {
+  .-flex-wrap\:#{ $value } {
+    flex-wrap: #{ $value };
+  }
+}

package/src/utilities/_font-size.scss

@@ -0,0 +1,17 @@
+@each $key, $value in (
+  -2: xs,
+  -1: s,
+  0: m,
+  1: l,
+  2: xl,
+  3: 2xl,
+  4: 3xl,
+  5: 4xl,
+  6: 5xl,
+  7: 6xl,
+  8: 7xl,
+) {
+  .-font-size\:#{ $value } {
+    --unitone--font-size: #{ $key } !important;
+  }
+}

package/src/utilities/_font-weight.scss

@@ -0,0 +1,7 @@
+@each $value in (
+  bold,
+) {
+  .-font-weight\:#{ $value } {
+    font-weight: #{ $value };
+  }
+}

package/src/utilities/_gap.scss

@@ -0,0 +1,17 @@
+@for $i from -3 through 7 {
+  .-gap\:#{ $i } { gap: var(--unitone--s#{ $i }); }
+  .-column-gap\:#{ $i } { column-gap: var(--unitone--s#{ $i }); }
+  .-row-gap\:#{ $i } { row-gap: var(--unitone--s#{ $i }); }
+}
+
+@for $i from 1 through 7 {
+  .-gap\:#{ $i }s { gap: var(--unitone--s#{ $i }s); }
+  .-column-gap\:#{ $i }s { column-gap: var(--unitone--s#{ $i }s); }
+  .-row-gap\:#{ $i }s { row-gap: var(--unitone--s#{ $i }s); }
+}
+
+@for $i from 2 through 7 {
+  .-gap\:#{ $i }m { gap: var(--unitone--s#{ $i }m); }
+  .-column-gap\:#{ $i }m { column-gap: var(--unitone--s#{ $i }m); }
+  .-row-gap\:#{ $i }m { row-gap: var(--unitone--s#{ $i }m); }
+}

package/src/utilities/_global.scss

@@ -0,0 +1,19 @@
+.-box-shadow {
+  box-shadow: var(--unitone--global--box-shadow);
+}
+
+.-border-radius {
+  border-radius: var(--unitone--global--border-radius);
+}
+
+.-gutters {
+  padding-inline: var(--unitone--global--gutters);
+}
+
+.-max-width\:content-size {
+  max-width: var(--unitone--measure);
+}
+
+.-max-width\:wide-size {
+  max-width: var(--unitone--container-max-width);
+}

package/src/utilities/_index.scss

@@ -0,0 +1,21 @@
+@use './align-content';
+@use './align-items';
+@use './align-self';
+@use './background-color';
+@use './color';
+@use './display';
+@use './flex-direction';
+@use './flex-wrap';
+@use './font-size';
+@use './font-weight';
+@use './gap';
+@use './global';
+@use './justify-content';
+@use './justify-items';
+@use './justify-self';
+@use './mix-blend-mode';
+@use './overflow';
+@use './padding';
+@use './position';
+@use './text-align';
+@use './typography';

package/src/utilities/_justify-content.scss

@@ -0,0 +1,12 @@
+@each $value in (
+  start,
+  center,
+  end,
+  space-between,
+  space-around,
+  space-evenly
+) {
+  .-justify-content\:#{ $value } {
+    justify-content: #{ $value };
+  }
+}

package/src/utilities/_justify-items.scss

@@ -0,0 +1,10 @@
+@each $value in (
+  start,
+  center,
+  end,
+  stretch
+) {
+  .-justify-items\:#{ $value } {
+    justify-items: #{ $value };
+  }
+}

package/src/utilities/_justify-self.scss

@@ -0,0 +1,11 @@
+@each $value in (
+  start,
+  center,
+  end,
+  stretch,
+  auto
+) {
+  .-justify-self\:#{ $value } {
+    justify-self: #{ $value };
+  }
+}

package/src/utilities/_mix-blend-mode.scss

@@ -0,0 +1,22 @@
+@each $value in (
+  normal,
+  multiply,
+  screen,
+  overlay,
+  darken,
+  lighten,
+  color-dodge,
+  color-burn,
+  hard-light,
+  soft-light,
+  difference,
+  exclusion,
+  hue,
+  saturation,
+  color,
+  luminosity
+) {
+  .-mix-blend-mode\:#{ $value } {
+    mix-blend-mode: #{ $value };
+  }
+}

package/src/utilities/_overflow.scss

@@ -0,0 +1,11 @@
+@each $value in (
+  visible,
+  hidden,
+  scroll,
+  auto,
+  clip
+) {
+  .-overflow\:#{ $value } {
+    overflow: #{ $value };
+  }
+}

package/src/utilities/_padding.scss

@@ -0,0 +1,50 @@
+@for $i from -3 through 7 {
+  .-padding\:#{ $i } { padding: var(--unitone--p#{ $i }); }
+
+  .-padding-inline\:#{ $i } { padding-inline: var(--unitone--p#{ $i }); }
+  .-padding-inline-start\:#{ $i } { padding-inline-start: var(--unitone--p#{ $i }); }
+  .-padding-inline-end\:#{ $i } { padding-inline-end: var(--unitone--p#{ $i }); }
+
+  .-padding-block\:#{ $i } { padding-block: var(--unitone--p#{ $i }); }
+  .-padding-block-start\:#{ $i } { padding-block-start: var(--unitone--p#{ $i }); }
+  .-padding-block-end\:#{ $i } { padding-block-end: var(--unitone--p#{ $i }); }
+
+  .-padding-top\:#{ $i } { padding-top: var(--unitone--p#{ $i }); }
+  .-padding-right\:#{ $i } { padding-right: var(--unitone--p#{ $i }); }
+  .-padding-bottom\:#{ $i } { padding-bottom: var(--unitone--p#{ $i }); }
+  .-padding-left\:#{ $i } { padding-left: var(--unitone--p#{ $i }); }
+}
+
+@for $i from 1 through 7 {
+  .-padding\:#{ $i }s { padding: var(--unitone--p#{ $i }s); }
+
+  .-padding-inline\:#{ $i }s { padding-inline: var(--unitone--p#{ $i }s); }
+  .-padding-inline-start\:#{ $i }s { padding-inline-start: var(--unitone--p#{ $i }s); }
+  .-padding-inline-end\:#{ $i }s { padding-inline-end: var(--unitone--p#{ $i }s); }
+
+  .-padding-block\:#{ $i }s { padding-block: var(--unitone--p#{ $i }s); }
+  .-padding-block-start\:#{ $i }s { padding-block-start: var(--unitone--p#{ $i }s); }
+  .-padding-block-end\:#{ $i }s { padding-block-end: var(--unitone--p#{ $i }s); }
+
+  .-padding-top\:#{ $i }s { padding-top: var(--unitone--p#{ $i }s); }
+  .-padding-right\:#{ $i }s { padding-right: var(--unitone--p#{ $i }s); }
+  .-padding-bottom\:#{ $i }s { padding-bottom: var(--unitone--p#{ $i }s); }
+  .-padding-left\:#{ $i }s { padding-left: var(--unitone--p#{ $i }s); }
+}
+
+@for $i from 2 through 7 {
+  .-padding\:#{ $i }m { padding: var(--unitone--p#{ $i }m); }
+
+  .-padding-inline\:#{ $i }m { padding-inline: var(--unitone--p#{ $i }m); }
+  .-padding-inline-start\:#{ $i }m { padding-inline-start: var(--unitone--p#{ $i }m); }
+  .-padding-inline-end\:#{ $i }m { padding-inline-end: var(--unitone--p#{ $i }m); }
+
+  .-padding-block\:#{ $i }m { padding-block: var(--unitone--p#{ $i }m); }
+  .-padding-block-start\:#{ $i }m { padding-block-start: var(--unitone--p#{ $i }m); }
+  .-padding-block-end\:#{ $i }m { padding-block-end: var(--unitone--p#{ $i }m); }
+
+  .-padding-top\:#{ $i }m { padding-top: var(--unitone--p#{ $i }m); }
+  .-padding-right\:#{ $i }m { padding-right: var(--unitone--p#{ $i }m); }
+  .-padding-bottom\:#{ $i }m { padding-bottom: var(--unitone--p#{ $i }m); }
+  .-padding-left\:#{ $i }m { padding-left: var(--unitone--p#{ $i }m); }
+}

package/src/utilities/_position.scss

@@ -0,0 +1,11 @@
+@each $value in (
+  static,
+  relative,
+  absolute,
+  fixed,
+  sticky
+) {
+  .-position\:#{ $value } {
+    position: #{ $value };
+  }
+}

package/src/utilities/_text-align.scss

@@ -0,0 +1,12 @@
+@each $value in (
+  start,
+  end,
+  left,
+  right,
+  center,
+  justify
+) {
+  .-text-align\:#{ $value } {
+    text-align: #{ $value };
+  }
+}

package/src/utilities/_typography.scss

@@ -0,0 +1,5 @@
+@use '../variables' as variables;
+
+.-fluid-typography {
+  @include variables.fluid-typography();
+}