FlueKit

Appearance

Colors ​

Predefined colors for use in your application.

Visual Reference ​

Material Colors
rgb(244, 67, 54)
Colors.red
rgb(233, 30, 99)
Colors.pink
rgb(156, 39, 176)
Colors.purple
rgb(103, 58, 183)
Colors.deepPurple
rgb(63, 81, 181)
Colors.indigo
rgb(33, 150, 243)
Colors.blue
rgb(3, 169, 244)
Colors.lightBlue
rgb(0, 188, 212)
Colors.cyan
rgb(0, 150, 136)
Colors.teal
rgb(76, 175, 80)
Colors.green
rgb(139, 195, 74)
Colors.lightGreen
rgb(205, 220, 57)
Colors.lime
rgb(255, 235, 59)
Colors.yellow
rgb(255, 193, 7)
Colors.amber
rgb(255, 152, 0)
Colors.orange
rgb(255, 87, 34)
Colors.deepOrange
rgb(121, 85, 72)
Colors.brown
rgb(158, 158, 158)
Colors.grey
rgb(96, 125, 139)
Colors.blueGrey
Shades Example (Blue)
rgb(227, 242, 253)
Colors.blue50
rgb(187, 222, 251)
Colors.blue100
rgb(144, 202, 249)
Colors.blue200
rgb(100, 181, 246)
Colors.blue300
rgb(66, 165, 245)
Colors.blue400
rgb(33, 150, 243)
Colors.blue500
rgb(30, 136, 229)
Colors.blue600
rgb(25, 118, 210)
Colors.blue700
rgb(21, 101, 192)
Colors.blue800
rgb(13, 71, 161)
Colors.blue900
Cupertino Colors
rgb(0, 122, 255)
CupertinoColors.activeBlue
rgb(52, 199, 89)
CupertinoColors.activeGreen
rgb(255, 149, 0)
CupertinoColors.activeOrange
rgb(255, 59, 48)
CupertinoColors.destructiveRed
rgb(0, 122, 255)
CupertinoColors.systemBlue
rgb(52, 199, 89)
CupertinoColors.systemGreen
rgb(255, 59, 48)
CupertinoColors.systemRed
rgb(142, 142, 147)
CupertinoColors.systemGrey
vue
<template>
  <Column :gap="20">
    <Column :gap="10">
      <Text
        data="Material Colors"
        :style="TextStyle({ fontSize: 18, fontWeight: FontWeight.bold })"
      />
      <Wrap :spacing="10" :run-spacing="10">
        <ColorItem name="Colors.red" :color="Colors.red" />
        <ColorItem name="Colors.pink" :color="Colors.pink" />
        <ColorItem name="Colors.purple" :color="Colors.purple" />
        <ColorItem name="Colors.deepPurple" :color="Colors.deepPurple" />
        <ColorItem name="Colors.indigo" :color="Colors.indigo" />
        <ColorItem name="Colors.blue" :color="Colors.blue" />
        <ColorItem name="Colors.lightBlue" :color="Colors.lightBlue" />
        <ColorItem name="Colors.cyan" :color="Colors.cyan" />
        <ColorItem name="Colors.teal" :color="Colors.teal" />
        <ColorItem name="Colors.green" :color="Colors.green" />
        <ColorItem name="Colors.lightGreen" :color="Colors.lightGreen" />
        <ColorItem name="Colors.lime" :color="Colors.lime" />
        <ColorItem name="Colors.yellow" :color="Colors.yellow" />
        <ColorItem name="Colors.amber" :color="Colors.amber" />
        <ColorItem name="Colors.orange" :color="Colors.orange" />
        <ColorItem name="Colors.deepOrange" :color="Colors.deepOrange" />
        <ColorItem name="Colors.brown" :color="Colors.brown" />
        <ColorItem name="Colors.grey" :color="Colors.grey" />
        <ColorItem name="Colors.blueGrey" :color="Colors.blueGrey" />
      </Wrap>
    </Column>

    <Column :gap="10">
      <Text
        data="Shades Example (Blue)"
        :style="TextStyle({ fontSize: 18, fontWeight: FontWeight.bold })"
      />
      <Wrap :spacing="10" :run-spacing="10">
        <ColorItem name="Colors.blue50" :color="Colors.blue50" />
        <ColorItem name="Colors.blue100" :color="Colors.blue100" />
        <ColorItem name="Colors.blue200" :color="Colors.blue200" />
        <ColorItem name="Colors.blue300" :color="Colors.blue300" />
        <ColorItem name="Colors.blue400" :color="Colors.blue400" />
        <ColorItem name="Colors.blue500" :color="Colors.blue500" />
        <ColorItem name="Colors.blue600" :color="Colors.blue600" />
        <ColorItem name="Colors.blue700" :color="Colors.blue700" />
        <ColorItem name="Colors.blue800" :color="Colors.blue800" />
        <ColorItem name="Colors.blue900" :color="Colors.blue900" />
      </Wrap>
    </Column>

    <Column :gap="10">
      <Text
        data="Cupertino Colors"
        :style="TextStyle({ fontSize: 18, fontWeight: FontWeight.bold })"
      />
      <Wrap :spacing="10" :run-spacing="10">
        <ColorItem name="CupertinoColors.activeBlue" :color="CupertinoColors.activeBlue" />
        <ColorItem name="CupertinoColors.activeGreen" :color="CupertinoColors.activeGreen" />
        <ColorItem name="CupertinoColors.activeOrange" :color="CupertinoColors.activeOrange" />
        <ColorItem name="CupertinoColors.destructiveRed" :color="CupertinoColors.destructiveRed" />
        <ColorItem name="CupertinoColors.systemBlue" :color="CupertinoColors.systemBlue" />
        <ColorItem name="CupertinoColors.systemGreen" :color="CupertinoColors.systemGreen" />
        <ColorItem name="CupertinoColors.systemRed" :color="CupertinoColors.systemRed" />
        <ColorItem name="CupertinoColors.systemGrey" :color="CupertinoColors.systemGrey" />
      </Wrap>
    </Column>
  </Column>
</template>

<script setup lang="ts">
import {
  Border,
  BorderRadius,
  BoxDecoration,
  Color,
  Colors,
  Column,
  Container,
  CupertinoColors,
  FontWeight,
  Text,
  TextAlign,
  TextStyle,
  Wrap,
} from "fluekit";
import { defineComponent, h } from "vue";

const ColorItem = defineComponent({
  props: {
    name: String,
    color: Color,
  },
  setup(props) {
    return () =>
      h(Column, { alignment: "center" }, () => [
        h(
          Container,
          {
            width: 80,
            height: 80,
            decoration: BoxDecoration({
              color: props.color,
              borderRadius: BorderRadius.circular(8),
              border: Border.all({ color: "#E0E0E0", width: 1 }),
            }),
            alignment: "center",
          },
          () =>
            h(Text, {
              data: props.color?.toString() || "",
              style: TextStyle({
                fontSize: 10,
                color: "#fff",
                shadows: [
                  {
                    color: "rgba(0,0,0,0.5)",
                    blurRadius: 4,
                    offsetX: 2,
                    offsetY: 2,
                  },
                ],
              }),
            }),
        ),
        h(Container, { height: 4 }),
        h(Text, {
          data: props.name,
          textAlign: TextAlign.center,
          style: TextStyle({ fontSize: 10, color: "#666" }),
        }),
      ]);
  },
});
</script>

Material Colors ​

The Colors object contains the standard Material Design color palette.

Usage ​

vue
<script setup lang="ts">
import { Colors, Container, Text } from "fluekit";
</script>

<template>
  <Container :color="Colors.red">
    <Text data="Red Background" :style="{ color: Colors.white }" />
  </Container>

  <Container :color="Colors.blue500">
    <Text data="Blue 500" />
  </Container>
</template>

Available Colors ​

Standard colors include:

  • transparent
  • black, black87, black54, etc.
  • white, white70, white60, etc.
  • red, pink, purple, deepPurple
  • indigo, blue, lightBlue, cyan
  • teal, green, lightGreen, lime
  • yellow, amber, orange, deepOrange
  • brown, grey, blueGrey

Each color usually has shades from 50 to 900 (e.g., red50, red100, ..., red900) and accent variations (e.g., redAccent, redAccent100, ..., redAccent700).

Cupertino Colors ​

The CupertinoColors object contains the standard iOS color palette.

Usage ​

vue
<script setup lang="ts">
import { CupertinoColors, Container, Text } from "fluekit";
</script>

<template>
  <Container :color="CupertinoColors.systemBlue">
    <Text data="System Blue" :style="{ color: CupertinoColors.white }" />
  </Container>
</template>

Available Colors ​

Standard colors include:

  • activeBlue, activeGreen, activeOrange
  • white, black
  • lightBackgroundGray, extraLightBackgroundGray, darkBackgroundGray
  • label, secondaryLabel, tertiaryLabel, quaternaryLabel
  • systemBlue, systemGreen, systemIndigo, systemOrange, systemPink, systemPurple, systemRed, systemTeal, systemYellow, systemGrey
  • systemBackground, secondarySystemBackground, tertiarySystemBackground
  • systemGroupedBackground, secondarySystemGroupedBackground, tertiarySystemGroupedBackground
  • separator, opaqueSeparator
  • link
  • destructiveRed

Color Manipulation ​

Both Colors and CupertinoColors include helper methods for color manipulation.

withOpacity ​

Returns a new color with the specified opacity (0.0 to 1.0).

vue
<script setup lang="ts">
import { Colors, Container, Text } from "fluekit";
</script>

<template>
  <!-- Red with 50% opacity -->
  <Container :color="Colors.withOpacity(Colors.red, 0.5)">
    <Text data="Semi-transparent Red" />
  </Container>
</template>

Or use the standalone utility:

ts
import { ColorUtils } from "fluekit";

const myColor = ColorUtils.withOpacity("#000000", 0.5); // rgba(0, 0, 0, 0.5)

lighten ​

Lightens a color by a percentage (0.0 to 1.0).

ts
const lightRed = Colors.lighten(Colors.red, 0.2); // 20% lighter

darken ​

Darkens a color by a percentage (0.0 to 1.0).

ts
const darkBlue = Colors.darken(Colors.blue, 0.2); // 20% darker

Color Class ​

Colors and CupertinoColors now return Color instances instead of strings. The Color class provides methods similar to Flutter's Color class.

ts
import { Colors, Color } from "fluekit";

const red = Colors.red;

// Get properties
console.log(red.red); // 244
console.log(red.green); // 67
console.log(red.blue); // 54
console.log(red.alpha); // 255
console.log(red.opacity); // 1.0

// Methods
const semiTransparentRed = red.withOpacity(0.5);
const newColor = red.withRed(100);

toString() ​

The Color object's toString() method returns a CSS-compatible string (e.g., rgba(255, 0, 0, 1)), so it can be used directly in style bindings.

vue
<div :style="{ backgroundColor: Colors.red }"></div>

withAlpha / withRed / withGreen / withBlue ​

Modify specific channels of a color.

ts
// Set alpha channel (0-255)
const semiTransparent = Colors.withAlpha(Colors.red, 128);

// Replace red channel (0-255)
const modifiedRed = Colors.withRed(Colors.blue, 100);

computeLuminance ​

Returns the relative luminance of the color (0.0 to 1.0).

ts
const lum = Colors.computeLuminance(Colors.white); // 1.0
const isDark = Colors.computeLuminance(myColor) < 0.5;