feat: outline

master-co · Dec 20, 2021 · be7054e · be7054e
1 parent c9cecbe
commit be7054e
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 20 deletions.
diff --git a/src/background-color.ts b/src/background-color.ts
@@ -3,5 +3,6 @@ import { BACKGROUND, COLOR, DASH } from './constants/css-property-keyword';
 
 export class BackgroundColorStyle extends Style {
     static override prefixes = /^(bg-color:|(bg|background):transparent)/;
+    static override colorStarts = '(bg|background):';
     static override key = BACKGROUND + DASH + COLOR;
 }
diff --git a/src/border-color.ts b/src/border-color.ts
@@ -3,5 +3,6 @@ import { BORDER, COLOR, DASH } from './constants/css-property-keyword';
 
 export class BorderColorStyle extends Style {
     static override prefixes = /^b-color:/;
+    static override colorStarts = 'b(order)?:';
     static override key = BORDER + DASH + COLOR;
 }
diff --git a/src/border-style.ts b/src/border-style.ts
@@ -2,6 +2,6 @@ import { Style } from '@master/style';
 import { BORDER, DASH, STYLE } from './constants/css-property-keyword';
 
 export class BorderStyleStyle extends Style {
-    static override prefixes = /^b-style:|b(order)?:dotted|dashed|solid|double|groove|ridge|inset|outset/;
+    static override prefixes = /^b-style:|b(order)?:(dotted|dashed|solid|double|groove|ridge|inset|outset)/;
     static override key = BORDER + DASH + STYLE;
 }
diff --git a/src/font-family.ts b/src/font-family.ts
@@ -1,21 +1,14 @@
-import { DASH, FAMILY, FONT, FONT_PREFIX, F_PREFIX, MONO, SANS, SERIF, VAR_END, VAR_START } from './constants/css-property-keyword';
+import { DASH, FAMILY, FONT, MONO, SANS, SERIF, VAR_END, VAR_START } from './constants/css-property-keyword';
 import { Style } from '@master/style';
 
 const VAR_F = VAR_START + 'f' + DASH;
 
 export class FontFamilyStyle extends Style {
-    static override prefixes = /^f-family:/;
+    static override prefixes = /^f-family:|f(ont)?:(mono|sans|serif)/;
     static override key = FONT + DASH + FAMILY;
     static override values = {
         mono: VAR_F + MONO + VAR_END,
         sans: VAR_F + SANS + VAR_END,
         serif: VAR_F + SERIF + VAR_END
     }
-    static override semantics = {};
-}
-
-for (const name in FontFamilyStyle.values) {
-    const value = FontFamilyStyle.values[name];
-    FontFamilyStyle.semantics[F_PREFIX + name] = value;
-    FontFamilyStyle.semantics[FONT_PREFIX + name] = value;
 }
diff --git a/src/index.ts b/src/index.ts
@@ -130,6 +130,7 @@ import { OutlineColorStyle } from './outline-color';
 import { OutlineOffsetStyle } from './outline-offset';
 import { OutlineStyleStyle } from './outline-style';
 import { OutlineWidthStyle } from './outline-width';
+import { OutlineStyle } from './outline';
 import { BorderCollapseStyle } from './border-collapse';
 import { TableLayoutStyle } from './table-layout';
 import { AccentColorStyle } from './accent-color';
@@ -293,6 +294,7 @@ StyleSheet.Styles.push(
     OutlineOffsetStyle,
     OutlineStyleStyle,
     OutlineWidthStyle,
+    OutlineStyle,
     AccentColorStyle,
     AppearanceStyle,
     CaretColorStyle,
@@ -307,19 +309,32 @@ StyleSheet.Styles.push(
 )
 
 window.addEventListener('DOMContentLoaded', (event) => {
-    const sheet = new StyleSheet(document.head);
-    StyleSheet.root = sheet;
-    sheet.observe(document.documentElement, { subtree: false, childList: false });
-    sheet.observe(document.body);
     const palettes = {
         blue: ['edf5ff', 'd0e2ff', 'a6c8ff', '78a9ff', '4589ff', '0f62fe', '0043ce', '002d9c', '001d6c', '001141'],
         red: ['fff1f1', 'ffd7d9', 'ffb3b8', 'ff8389', 'fa4d56', 'da1e28', 'a2191f', '750e13', '520408', '2d0709'],
         purple: ['f6f2ff', 'e8daff', 'd4bbff', 'be95ff', 'a56eff', '8a3ffc', '6929c4', '491d8b', '31135e', '1c0f30'],
-        gray: ['f4f4f4', 'e0e0e0', 'c6c6c6', 'a8a8a8', '8d8d8d', '6f6f6f', '525252', '393939', '262626', '161616'],
+        gray: ['f4f4f5', 'e0e0e1', 'c6c6c7', 'a8a8a9', '8d8d8e', '6f6f70', '525253', '39393a', '262627', '161617'],
         green: ['defbe6', 'a7f0ba', '6fdc8c', '42be65', '24a148', '198038', '0e6027', '044317', '022d0d', '071908'],
         pink: ['fff0f7', 'ffd6e8', 'ffafd2', 'ff7eb6', 'ee5396', 'd02670', '9f1853', '740937', '510224', '2a0a18'],
         cyan: ['e5f6ff', 'bae6ff', '82cfff', '33b1ff', '1192e8', '0072c3', '00539a', '003a6d', '012749', '061727'],
         teal: ['d9fbfb', '9ef0f0', '3ddbd9', '08bdba', '009d9a', '007d79', '005d5d', '004144', '022b30', '081a1c']
+    };
+    const colors = {
+        black: '000000',
+        white: 'ffffff'
+    };
+    for (const colorName in palettes) {
+        const colorCodes = palettes[colorName];
+        const eachColors = colors[colorName] = {};
+        let level = 10;
+        for (const colorCode of colorCodes) {
+            eachColors[level] = colorCode
+            level += 10;
+        }
     }
-    Object.assign(Style.colors, palettes);
+    Object.assign(Style.colors, colors);
+    const sheet = new StyleSheet(document.head);
+    StyleSheet.root = sheet;
+    sheet.observe(document.documentElement, { subtree: false, childList: false });
+    sheet.observe(document.body);
 })
diff --git a/src/outline-style.ts b/src/outline-style.ts
@@ -2,6 +2,6 @@ import { DASH, OUTLINE, STYLE } from './constants/css-property-keyword';
 import { Style } from '@master/style';
 
 export class OutlineStyleStyle extends Style {
-    static override prefixes = /^outline?:dotted|dashed|solid|double|groove|ridge|inset|outset/;
+    static override prefixes = /^outline?:(dotted|dashed|solid|double|groove|ridge|inset|outset)/;
     static override key = OUTLINE + DASH + STYLE;
 }
diff --git a/src/outline.ts b/src/outline.ts
@@ -0,0 +1,7 @@
+import { OUTLINE } from './constants/css-property-keyword';
+import { Style } from '@master/style';
+
+export class OutlineStyle extends Style {
+    static override prefixes = /^outline:/;
+    static override key = OUTLINE;
+}
diff --git a/src/text-leading.ts b/src/text-leading.ts
@@ -1,12 +1,12 @@
-import { DASH, FIRST, LETTER, TEXT, TRANSFORM, UPPERCASE } from './constants/css-property-keyword';
+import { DASH, FIRST, LETTER, UPPERCASE } from './constants/css-property-keyword';
 import { Style } from '@master/style';
 
 export class TextLeadingStyle extends Style {
     static override prefixes = /^t(ext)?:leading/;
-    static override fixedPseudo = ':' + FIRST + DASH + LETTER;
+    static override fixedPseudo = '::' + FIRST + DASH + LETTER;
     override get parseValue() {
         return {
-            [TEXT + DASH + TRANSFORM]: UPPERCASE
+            'text-transform': UPPERCASE
         };
     }
 }