@progressiveui/styles 10.30.0

package/scss/components/tag/_tokens.scss

@@ -0,0 +1,702 @@
+//
+// Copyright IBM Corp. 2020
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use 'sass:color';
+@use '../../colors';
+@use '../../theme' as *;
+@use '../../themes';
+@use '../../utilities/component-tokens';
+@use '../../utilities/custom-property';
+
+// prettier-ignore
+$-tokens: (
+  // red
+  'tag-background-red': (
+    fallback: colors.$red-20,
+    values: (
+      (
+        theme: themes.$white,
+        value: colors.$red-20,
+      ),
+      (
+        theme: themes.$g10,
+        value: colors.$red-20,
+      ),
+      (
+        theme: themes.$g90,
+        value: colors.$red-80,
+      ),
+      (
+        theme: themes.$g100,
+        value: colors.$red-80,
+      ),
+    ),
+  ),
+  'tag-color-red': (
+    fallback: colors.$red-80,
+    values: (
+      (
+        theme: themes.$white,
+        value: colors.$red-80,
+      ),
+      (
+        theme: themes.$g10,
+        value: colors.$red-80,
+      ),
+      (
+        theme: themes.$g90,
+        value: colors.$red-30,
+      ),
+      (
+        theme: themes.$g100,
+        value: colors.$red-30,
+      ),
+    ),
+  ),
+  'tag-hover-red': (
+    fallback: colors.$red-30,
+    values: (
+      (
+        theme: themes.$white,
+        value: colors.$red-30,
+      ),
+      (
+        theme: themes.$g10,
+        value: colors.$red-30,
+      ),
+      (
+        theme: themes.$g90,
+        value: colors.$red-70,
+      ),
+      (
+        theme: themes.$g100,
+        value: colors.$red-70,
+      ),
+    ),
+  ),
+
+  // magenta
+  'tag-background-magenta': (
+    fallback: colors.$magenta-20,
+    values: (
+      (
+        theme: themes.$white,
+        value: colors.$magenta-20,
+      ),
+      (
+        theme: themes.$g10,
+        value: colors.$magenta-20,
+      ),
+      (
+        theme: themes.$g90,
+        value: colors.$magenta-80,
+      ),
+      (
+        theme: themes.$g100,
+        value: colors.$magenta-80,
+      ),
+    ),
+  ),
+  'tag-color-magenta': (
+    fallback: colors.$magenta-80,
+    values: (
+      (
+        theme: themes.$white,
+        value: colors.$magenta-80,
+      ),
+      (
+        theme: themes.$g10,
+        value: colors.$magenta-80,
+      ),
+      (
+        theme: themes.$g90,
+        value: colors.$magenta-30,
+      ),
+      (
+        theme: themes.$g100,
+        value: colors.$magenta-30,
+      ),
+    ),
+  ),
+  'tag-hover-magenta': (
+    fallback: colors.$magenta-30,
+    values: (
+      (
+        theme: themes.$white,
+        value: colors.$magenta-30,
+      ),
+      (
+        theme: themes.$g10,
+        value: colors.$magenta-30,
+      ),
+      (
+        theme: themes.$g90,
+        value: colors.$magenta-70,
+      ),
+      (
+        theme: themes.$g100,
+        value: colors.$magenta-70,
+      ),
+    ),
+  ),
+
+  // purple
+  'tag-background-purple': (
+    fallback: colors.$purple-20,
+    values: (
+      (
+        theme: themes.$white,
+        value: colors.$purple-20,
+      ),
+      (
+        theme: themes.$g10,
+        value: colors.$purple-20,
+      ),
+      (
+        theme: themes.$g90,
+        value: colors.$purple-80,
+      ),
+      (
+        theme: themes.$g100,
+        value: colors.$purple-80,
+      ),
+    ),
+  ),
+  'tag-color-purple': (
+    fallback: colors.$purple-80,
+    values: (
+      (
+        theme: themes.$white,
+        value: colors.$purple-80,
+      ),
+      (
+        theme: themes.$g10,
+        value: colors.$purple-80,
+      ),
+      (
+        theme: themes.$g90,
+        value: colors.$purple-30,
+      ),
+      (
+        theme: themes.$g100,
+        value: colors.$purple-30,
+      ),
+    ),
+  ),
+  'tag-hover-purple': (
+    fallback: colors.$purple-30,
+    values: (
+      (
+        theme: themes.$white,
+        value: colors.$purple-30,
+      ),
+      (
+        theme: themes.$g10,
+        value: colors.$purple-30,
+      ),
+      (
+        theme: themes.$g90,
+        value: colors.$purple-70,
+      ),
+      (
+        theme: themes.$g100,
+        value: colors.$purple-70,
+      ),
+    ),
+  ),
+
+  // blue
+  'tag-background-blue': (
+    fallback: colors.$blue-20,
+    values: (
+      (
+        theme: themes.$white,
+        value: colors.$blue-20,
+      ),
+      (
+        theme: themes.$g10,
+        value: colors.$blue-20,
+      ),
+      (
+        theme: themes.$g90,
+        value: colors.$blue-80,
+      ),
+      (
+        theme: themes.$g100,
+        value: colors.$blue-80,
+      ),
+    ),
+  ),
+  'tag-color-blue': (
+    fallback: colors.$blue-80,
+    values: (
+      (
+        theme: themes.$white,
+        value: colors.$blue-80,
+      ),
+      (
+        theme: themes.$g10,
+        value: colors.$blue-80,
+      ),
+      (
+        theme: themes.$g90,
+        value: colors.$blue-30,
+      ),
+      (
+        theme: themes.$g100,
+        value: colors.$blue-30,
+      ),
+    ),
+  ),
+  'tag-hover-blue': (
+    fallback: colors.$blue-30,
+    values: (
+      (
+        theme: themes.$white,
+        value: colors.$blue-30,
+      ),
+      (
+        theme: themes.$g10,
+        value: colors.$blue-30,
+      ),
+      (
+        theme: themes.$g90,
+        value: colors.$blue-70,
+      ),
+      (
+        theme: themes.$g100,
+        value: colors.$blue-70,
+      ),
+    ),
+  ),
+
+  // cyan
+  'tag-background-cyan': (
+    fallback: colors.$cyan-20,
+    values: (
+      (
+        theme: themes.$white,
+        value: colors.$cyan-20,
+      ),
+      (
+        theme: themes.$g10,
+        value: colors.$cyan-20,
+      ),
+      (
+        theme: themes.$g90,
+        value: colors.$cyan-80,
+      ),
+      (
+        theme: themes.$g100,
+        value: colors.$cyan-80,
+      ),
+    ),
+  ),
+  'tag-color-cyan': (
+    fallback: colors.$cyan-80,
+    values: (
+      (
+        theme: themes.$white,
+        value: colors.$cyan-80,
+      ),
+      (
+        theme: themes.$g10,
+        value: colors.$cyan-80,
+      ),
+      (
+        theme: themes.$g90,
+        value: colors.$cyan-30,
+      ),
+      (
+        theme: themes.$g100,
+        value: colors.$cyan-30,
+      ),
+    ),
+  ),
+  'tag-hover-cyan': (
+    fallback: colors.$cyan-30,
+    values: (
+      (
+        theme: themes.$white,
+        value: colors.$cyan-30,
+      ),
+      (
+        theme: themes.$g10,
+        value: colors.$cyan-30,
+      ),
+      (
+        theme: themes.$g90,
+        value: colors.$cyan-70,
+      ),
+      (
+        theme: themes.$g100,
+        value: colors.$cyan-70,
+      ),
+    ),
+  ),
+
+  // teal
+  'tag-background-teal': (
+    fallback: colors.$teal-20,
+    values: (
+      (
+        theme: themes.$white,
+        value: colors.$teal-20,
+      ),
+      (
+        theme: themes.$g10,
+        value: colors.$teal-20,
+      ),
+      (
+        theme: themes.$g90,
+        value: colors.$teal-80,
+      ),
+      (
+        theme: themes.$g100,
+        value: colors.$teal-80,
+      ),
+    ),
+  ),
+  'tag-color-teal': (
+    fallback: colors.$teal-80,
+    values: (
+      (
+        theme: themes.$white,
+        value: colors.$teal-80,
+      ),
+      (
+        theme: themes.$g10,
+        value: colors.$teal-80,
+      ),
+      (
+        theme: themes.$g90,
+        value: colors.$teal-30,
+      ),
+      (
+        theme: themes.$g100,
+        value: colors.$teal-30,
+      ),
+    ),
+  ),
+  'tag-hover-teal': (
+    fallback: colors.$teal-30,
+    values: (
+      (
+        theme: themes.$white,
+        value: colors.$teal-30,
+      ),
+      (
+        theme: themes.$g10,
+        value: colors.$teal-30,
+      ),
+      (
+        theme: themes.$g90,
+        value: colors.$teal-70,
+      ),
+      (
+        theme: themes.$g100,
+        value: colors.$teal-70,
+      ),
+    ),
+  ),
+
+  // green
+  'tag-background-green': (
+    fallback: colors.$green-20,
+    values: (
+      (
+        theme: themes.$white,
+        value: colors.$green-20,
+      ),
+      (
+        theme: themes.$g10,
+        value: colors.$green-20,
+      ),
+      (
+        theme: themes.$g90,
+        value: colors.$green-80,
+      ),
+      (
+        theme: themes.$g100,
+        value: colors.$green-80,
+      ),
+    ),
+  ),
+  'tag-color-green': (
+    fallback: colors.$green-80,
+    values: (
+      (
+        theme: themes.$white,
+        value: colors.$green-80,
+      ),
+      (
+        theme: themes.$g10,
+        value: colors.$green-80,
+      ),
+      (
+        theme: themes.$g90,
+        value: colors.$green-30,
+      ),
+      (
+        theme: themes.$g100,
+        value: colors.$green-30,
+      ),
+    ),
+  ),
+  'tag-hover-green': (
+    fallback: colors.$green-30,
+    values: (
+      (
+        theme: themes.$white,
+        value: colors.$green-30,
+      ),
+      (
+        theme: themes.$g10,
+        value: colors.$green-30,
+      ),
+      (
+        theme: themes.$g90,
+        value: colors.$green-70,
+      ),
+      (
+        theme: themes.$g100,
+        value: colors.$green-70,
+      ),
+    ),
+  ),
+
+  // gray
+  'tag-background-gray': (
+    fallback: colors.$gray-20,
+    values: (
+      (
+        theme: themes.$white,
+        value: colors.$gray-20,
+      ),
+      (
+        theme: themes.$g10,
+        value: colors.$gray-20,
+      ),
+      (
+        theme: themes.$g90,
+        value: colors.$gray-80,
+      ),
+      (
+        theme: themes.$g100,
+        value: colors.$gray-80,
+      ),
+    ),
+  ),
+  'tag-color-gray': (
+    fallback: colors.$gray-80,
+    values: (
+      (
+        theme: themes.$white,
+        value: colors.$gray-80,
+      ),
+      (
+        theme: themes.$g10,
+        value: colors.$gray-80,
+      ),
+      (
+        theme: themes.$g90,
+        value: colors.$gray-30,
+      ),
+      (
+        theme: themes.$g100,
+        value: colors.$gray-30,
+      ),
+    ),
+  ),
+  'tag-hover-gray': (
+    fallback: colors.$gray-30,
+    values: (
+      (
+        theme: themes.$white,
+        value: colors.$gray-30,
+      ),
+      (
+        theme: themes.$g10,
+        value: colors.$gray-30,
+      ),
+      (
+        theme: themes.$g90,
+        value: colors.$gray-70,
+      ),
+      (
+        theme: themes.$g100,
+        value: colors.$gray-70,
+      ),
+    ),
+  ),
+
+  // cool-gray
+  'tag-background-cool-gray': (
+    fallback: colors.$cool-gray-20,
+    values: (
+      (
+        theme: themes.$white,
+        value: colors.$cool-gray-20,
+      ),
+      (
+        theme: themes.$g10,
+        value: colors.$cool-gray-20,
+      ),
+      (
+        theme: themes.$g90,
+        value: colors.$cool-gray-80,
+      ),
+      (
+        theme: themes.$g100,
+        value: colors.$cool-gray-80,
+      ),
+    ),
+  ),
+  'tag-color-cool-gray': (
+    fallback: colors.$cool-gray-80,
+    values: (
+      (
+        theme: themes.$white,
+        value: colors.$cool-gray-80,
+      ),
+      (
+        theme: themes.$g10,
+        value: colors.$cool-gray-80,
+      ),
+      (
+        theme: themes.$g90,
+        value: colors.$cool-gray-30,
+      ),
+      (
+        theme: themes.$g100,
+        value: colors.$cool-gray-30,
+      ),
+    ),
+  ),
+  'tag-hover-cool-gray': (
+    fallback: colors.$cool-gray-30,
+    values: (
+      (
+        theme: themes.$white,
+        value: colors.$cool-gray-30,
+      ),
+      (
+        theme: themes.$g10,
+        value: colors.$cool-gray-30,
+      ),
+      (
+        theme: themes.$g90,
+        value: colors.$cool-gray-70,
+      ),
+      (
+        theme: themes.$g100,
+        value: colors.$cool-gray-70,
+      ),
+    ),
+  ),
+
+  // warm-gray
+  'tag-background-warm-gray': (
+    fallback: colors.$warm-gray-20,
+    values: (
+      (
+        theme: themes.$white,
+        value: colors.$warm-gray-20,
+      ),
+      (
+        theme: themes.$g10,
+        value: colors.$warm-gray-20,
+      ),
+      (
+        theme: themes.$g90,
+        value: colors.$warm-gray-80,
+      ),
+      (
+        theme: themes.$g100,
+        value: colors.$warm-gray-80,
+      ),
+    ),
+  ),
+  'tag-color-warm-gray': (
+    fallback: colors.$warm-gray-80,
+    values: (
+      (
+        theme: themes.$white,
+        value: colors.$warm-gray-80,
+      ),
+      (
+        theme: themes.$g10,
+        value: colors.$warm-gray-80,
+      ),
+      (
+        theme: themes.$g90,
+        value: colors.$warm-gray-30,
+      ),
+      (
+        theme: themes.$g100,
+        value: colors.$warm-gray-30,
+      ),
+    ),
+  ),
+  'tag-hover-warm-gray': (
+    fallback: colors.$warm-gray-30,
+    values: (
+      (
+        theme: themes.$white,
+        value: colors.$warm-gray-30,
+      ),
+      (
+        theme: themes.$g10,
+        value: colors.$warm-gray-30,
+      ),
+      (
+        theme: themes.$g90,
+        value: colors.$warm-gray-70,
+      ),
+      (
+        theme: themes.$g100,
+        value: colors.$warm-gray-70,
+      ),
+    ),
+  ),
+);
+
+$tag-background-red: custom-property.get-var('tag-background-red');
+$tag-color-red: custom-property.get-var('tag-color-red');
+$tag-hover-red: custom-property.get-var('tag-hover-red');
+$tag-background-magenta: custom-property.get-var('tag-background-magenta');
+$tag-color-magenta: custom-property.get-var('tag-color-magenta');
+$tag-hover-magenta: custom-property.get-var('tag-hover-magenta');
+$tag-background-purple: custom-property.get-var('tag-background-purple');
+$tag-color-purple: custom-property.get-var('tag-color-purple');
+$tag-hover-purple: custom-property.get-var('tag-hover-purple');
+$tag-background-blue: custom-property.get-var('tag-background-blue');
+$tag-color-blue: custom-property.get-var('tag-color-blue');
+$tag-hover-blue: custom-property.get-var('tag-hover-blue');
+$tag-background-cyan: custom-property.get-var('tag-background-cyan');
+$tag-color-cyan: custom-property.get-var('tag-color-cyan');
+$tag-hover-cyan: custom-property.get-var('tag-hover-cyan');
+$tag-background-teal: custom-property.get-var('tag-background-teal');
+$tag-color-teal: custom-property.get-var('tag-color-teal');
+$tag-hover-teal: custom-property.get-var('tag-hover-teal');
+$tag-background-green: custom-property.get-var('tag-background-green');
+$tag-color-green: custom-property.get-var('tag-color-green');
+$tag-hover-green: custom-property.get-var('tag-hover-green');
+$tag-background-gray: custom-property.get-var('tag-background-gray');
+$tag-color-gray: custom-property.get-var('tag-color-gray');
+$tag-hover-gray: custom-property.get-var('tag-hover-gray');
+$tag-background-cool-gray: custom-property.get-var('tag-background-cool-gray');
+$tag-color-cool-gray: custom-property.get-var('tag-color-cool-gray');
+$tag-hover-cool-gray: custom-property.get-var('tag-color-cool-gray');
+$tag-background-warm-gray: custom-property.get-var('tag-background-warm-gray');
+$tag-color-warm-gray: custom-property.get-var('tag-color-warm-gray');
+$tag-hover-warm-gray: custom-property.get-var('tag-hover-warm-gray');
+
+$white: component-tokens.get-tokens($-tokens, themes.$white);
+$g10: component-tokens.get-tokens($-tokens, themes.$g10);
+$g90: component-tokens.get-tokens($-tokens, themes.$g90);
+$g100: component-tokens.get-tokens($-tokens, themes.$g100);

package/scss/components/text-area/_index.scss

@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward 'text-area';
+@use 'text-area';
+
+@include text-area.text-area;