fix: add missing classes Fabric supported #135

siljec · 2023-06-29T13:04:51Z

WARP-121: Add tabular-nums, lining-nums and border-inverted (to replace border-white ) + some font variant numeric classes from tailwind.

Other notes:

PR to update parity with these findings: fix: add classes to ignore, add readme and remove unused selectors.js parity#3
New working document to investigate the classes: https://docs.google.com/spreadsheets/d/1W0n74LSV6IG2YIU1LJNopFNtTkSYLY3rfPa9c1qg9d4/edit#gid=0
We also had this from earlier: https://docs.google.com/spreadsheets/d/1gk1LhpUimjk9QnZhZyId7c56xk30dbzQxRCzuGLlllY/edit#gid=0

siljec · 2023-06-29T13:05:48Z

src/_rules/typography.js

@@ -10,4 +10,5 @@ export const typography = [
    ({ 'line-height': `var(--w-line-height-${size})` }),
  ],
  [/^leading-\[(.+)(rem|px)?\]/, ([, value, unit], context) => ({ 'line-height': resolveArbitraryValues(value, unit, context) })],
+  ['tabular-nums', { 'font-family': 'ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif', 'font-variant-numeric': 'tabular-nums' }],


tabular-nums: Missing class and requested from Dave.
It was in fabric here: https://github.com/fabric-ds/css/blob/01fd80a27461cf0d593911e974853f84963d0681/src/utilities.css#L13

I found a TODO on the css-docs related page. https://warp-ds.github.io/css-docs/font-variant-numeric#applying-numeric-variants 👇
!TODO: Discuss the support for this in warp. We might to have to theme this somehow, these fonts might look too different to some of the brand fonts and perhaps need different weights to match them better to the brand font.
Is it something we need to consider?

Very good catch 🙏 I added a ticket: https://nmp-jira.atlassian.net/browse/WARP-171

siljec · 2023-06-30T10:00:32Z

src/_rules/typography.js

@@ -10,4 +10,6 @@ export const typography = [
    ({ 'line-height': `var(--w-line-height-${size})` }),
  ],
  [/^leading-\[(.+)(rem|px)?\]/, ([, value, unit], context) => ({ 'line-height': resolveArbitraryValues(value, unit, context) })],
+  ['tabular-nums', { 'font-family': 'ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif', 'font-variant-numeric': 'tabular-nums' }],
+  ['lining-nums', { 'font-variant-numeric': 'lining-nums' }],


lining-nums: Used in Finn, and not in Warp yet. It's from tailwind.

siljec · 2023-06-30T13:34:26Z

src/_rules/border.js

@@ -18,6 +18,7 @@ const borderStyles = [
 export const borders = [
  [/^border$/, handlerBorder],
  [/^border-transparent$/, () => ({ 'border-color': 'transparent' })],
+  [/^border-white$/, () => ({ 'border-color': '#fff' })],


border-white: Used in Finn, and not in Warp yet. It's from tailwind

I think we want to use var(--w-white) here instead of a hex value

Are we sure that we really want a border-white class though? 🤷 It says in the missing classes sheets that it is not used in Finn? And if we want to enable dark-mode, we would probably want whatever element this is set on to have a black border instead? We have inverted semantic tokens for background, icon and text... so we might want that for border as well? (ping @adidick)

border-white is used a lot in Finn. I found a lot of usages. Maybe we can advise on doing something else instead? Do not have an opinion here about why not use this class though. Good point about the inverted tokens. I guess we should do the same for borders, let's see what Adi answers

Yes, I searched in the wrong place, so it is used a lot. I'll change it to var(--w-white) at least :) Thanks!

I really don't think that we should add this. Simply because it will break dark-mode (if that is something we'll be doing?). Or... if we add a brand that has a dark background as default, not having a semantic class will give us no chance to override this for that brand... white is white. 🤷 I talked to Adi about this, and I think we should add a border-inverted semantic token... so then we can point any usage of border-white to instead use s-border-inverted. Wdyt?

Semantic tokens for inverted border (s-border-inverted) added in this PR : warp-ds/css#22

Good idea! I changed it now @magnuh!

siljec · 2023-07-10T06:38:58Z

src/_rules/typography.js

+  ['ordinal', { 'font-variant-numeric': 'ordinal' }],
+  ['slashed-zero', { 'font-variant-numeric': 'slashed-zero' }],
+  ['oldstyle-nums', { 'font-variant-numeric': 'oldstyle-nums' }],
+  ['proportional-nums', { 'font-variant-numeric': 'proportional-nums' }],


As discussed with Snorre last week, I'm adding these classes from tailwind also.

Skadefryd · 2023-07-10T07:50:08Z

src/_rules/border.js

@@ -18,6 +18,7 @@ const borderStyles = [
 export const borders = [
  [/^border$/, handlerBorder],
  [/^border-transparent$/, () => ({ 'border-color': 'transparent' })],
+  [/^border-inverted$/, () => ({ 'border-color': 'var(--w-s-border-inverted)' })],


Isnt the class names the only thing running the s- prefix? (not the vars? )

Hmm I see a lot of --w-s-xxx vars here: https://assets.finn.no/pkg/@warp-ds/tokens/1.0.0-alpha.92/finn-no.css - so I think it should contain -s here?

# [1.0.0-alpha.58](v1.0.0-alpha.57...v1.0.0-alpha.58) (2023-07-10) ### Bug Fixes * add missing classes Fabric supported ([#135](#135)) ([4ce6033](4ce6033))

# 1.0.0 (2023-08-22) ### Bug Fixes * add 75% to the opacity values ([#86](#86)) ([fa52e6e](fa52e6e)) * add arbitrary width support for border ([#88](#88)) ([2eb8d87](2eb8d87)) * add base styles to preflight ([#101](#101)) ([19ec46b](19ec46b)) * add bg color options ([#76](#76)) ([980c532](980c532)) * add correct token for the focus ring ([#87](#87)) ([9191bca](9191bca)) * add development flag back and externalize our published component classes ([#129](#129)) ([4470892](4470892)) * add font-bold to t1-t6 and use those classes to ref h1-h5 ([#146](#146)) ([1c6a81d](1c6a81d)) * add missing apostrofs ([#91](#91)) ([a28756e](a28756e)) * add missing classes Fabric supported ([#135](#135)) ([4ce6033](4ce6033)) * add px to the arbitrary border width ([#93](#93)) ([c4d17ae](c4d17ae)) * add rules and tests for caret ([#84](#84)) ([fac54a1](fac54a1)) * add skipResets flag ([#142](#142)) ([a13cbcd](a13cbcd)) * add styling for loading ([#77](#77)) ([87e0e50](87e0e50)) * Added missing rules for static border colors ([#123](#123)) ([6644a66](6644a66)) * **aspect-ratio:** add rules for aspect-ratio, -video and -square ([#150](#150)) ([f5d1c79](f5d1c79)) * avoid null issue and use empty array instead ([#144](#144)) ([6d56dcd](6d56dcd)) * avoid top-level await in reset ([#137](#137)) ([b35c803](b35c803)) * background arbitrary url rule change ([#95](#95)) ([ae70e51](ae70e51)) * bad comment syntax in preflight ([#73](#73)) ([ae37e8e](ae37e8e)) * be able to use a one-off background image ([#89](#89)) ([12df5a9](12df5a9)) * border-x|y fix and slider obsolete snapshot fix ([#120](#120)) ([85dfaec](85dfaec)) * cache the preflight instead of requesting every rebuild ([83537ca](83537ca)) * Cleanup color classes for text and background color ([#127](#127)) ([1b3d13e](1b3d13e)) * **display.js:** align order of css for display classes with fabric.css ([#147](#147)) ([aa00cfc](aa00cfc)) * escape current selector for focusable ([#122](#122)) ([00b789b](00b789b)) * extend regex for the background arbitrary values ([#92](#92)) ([d908e24](d908e24)) * focusable classes ([#109](#109)) ([8e3ca96](8e3ca96)) * focusable, last-child, spinner rules ([#110](#110)) ([40e75cf](40e75cf)) * height and width shouldn't match without a dash ([#83](#83)) ([3580750](3580750)) * improve arbitrary bg rule ([#111](#111)) ([ea43100](ea43100)) * improve syntax to clear the float for the elements after legend ([#108](#108)) ([75f4cac](75f4cac)) * only support gap from theme ([#31](#31)) ([4d49678](4d49678)) * proper handle bg arbitrary url as var ([#126](#126)) ([0ddd0e9](0ddd0e9)) * remove @warp-ds/css dep to fix circular dependency ([#149](#149)) ([e351c76](e351c76)) * remove a shortcut for the outline-none ([#128](#128)) ([ced819c](ced819c)) * remove caret class, will use current ([#85](#85)) ([f87db11](f87db11)) * remove input related stuff from preflight ([#81](#81)) ([a5dcb42](a5dcb42)) * Remove old fallback values from box shadows ([#140](#140)) ([da00995](da00995)) * remove resets from preflight and refactor ([#106](#106)) ([3591a3b](3591a3b)) * Replace arbitrary background class with semantic class for page-container ([#138](#138)) ([ee9c296](ee9c296)) * restructure html and body styling to make shadow dom styling work ([#107](#107)) ([7eb3e94](7eb3e94)) * **shadows:** add default box-shadow values to generic shadow classes ([#96](#96)) ([4adb2d6](4adb2d6)) * **shadow:** update naming of box-shadows ([#112](#112)) ([4405ae5](4405ae5)) * **slider:** fix slider bug ([#100](#100)) ([31b9b0c](31b9b0c)) * theme now exports useTheme ([#82](#82)) ([88476fd](88476fd)) * throw better errors for users who are missing 'fetch' ([#132](#132)) ([77ba1e2](77ba1e2)) * trigger a new release of alpha.59 ([#145](#145)) ([1ad8465](1ad8465)) * **typography.js:** add font-bold to .h1-5 shortcuts ([#121](#121)) ([b84a631](b84a631)) * update & align unocss dependencies ([#148](#148)) ([e540d19](e540d19)) * Update focus outline to use new semantic color token ([#139](#139)) ([673627d](673627d)) * update vite to 4.2.3 to fix a vulnerability ([#152](#152)) ([929c9af](929c9af)) * Updated rules for semantic colors to handle base level token names without ending "default" suffix ([#133](#133)) ([805526d](805526d)) * use #plugin alias in import in checkFabricClasses ([6022115](6022115)) * use new css repo for component classes ([#143](#143)) ([b2816b6](b2816b6)) * **workflows:** set node v to lts/* and pnpm to 8 ([#118](#118)) ([413058d](413058d)) * Wrong syntax ([#69](#69)) ([b938d3a](b938d3a)) ### Features * Add background, text and border classes for semantic color tokens ([#119](#119)) ([19b5ee9](19b5ee9)) * add css variables as arbitrary values for w and h ([#104](#104)) ([455c4cb](455c4cb)) * add layout rules and tests for rules ([d47d412](d47d412)) * add new shortcut for page-container ([#114](#114)) ([8ae08b3](8ae08b3)) * add rules for border and rounded ([#19](#19)) ([48ec500](48ec500)) * add rules for focusable classes ([#27](#27)) ([e9f7e08](e9f7e08)) * add rules for outline ([#125](#125)) ([3834087](3834087)) * add rules for shadows ([#90](#90)) ([a0dfbc5](a0dfbc5)) * add rules for table ([#33](#33)) ([d1ea3fb](d1ea3fb)) * add rules for text decoration ([#29](#29)) ([9797311](9797311)) * add tests for align rules ([64d2815](64d2815)) * arbitrary values accepted for leading ([#130](#130)) ([39919f4](39919f4)) * automate package publishing using semantic-release ([#68](#68)) ([9273e19](9273e19)) * **dropshadow:** add drop shadow ([#105](#105)) ([9b68cbe](9b68cbe)) * **internals:** add rules for border-top/right/bottom/left-color classes ([#78](#78)) ([83eb2f5](83eb2f5)) * **internals:** add rules for shadow component classes ([#94](#94)) ([e7e65d1](e7e65d1)) * rule for adding safe area inset from the bottom edge of the viewport ([#103](#103)) ([88186f6](88186f6)) * **rules:** add typography rules ([#99](#99)) ([6e1c363](6e1c363)) * **semantic.js:** add rules for semantic icon colors ([#124](#124)) ([afc0354](afc0354)) * **slider:** add border shadow for active and hover states ([#98](#98)) ([0b36581](0b36581)) * **slider:** add outline-none styling for slider ([#102](#102)) ([48fdd8a](48fdd8a)) * **touch-actions:** add support for touch actions ([#97](#97)) ([54a3002](54a3002))

fix: add tabular-nums class to typography

750fad5

siljec commented Jun 29, 2023

View reviewed changes

fix: add lining-nums to typography

bb775f7

siljec commented Jun 30, 2023

View reviewed changes

siljec changed the title ~~fix: add tabular-nums class to typography~~ fix: add missing classes Fabric supported Jun 30, 2023

siljec marked this pull request as ready for review June 30, 2023 12:08

siljec commented Jun 30, 2023

View reviewed changes

fix: add border-white to border

8e2405a

siljec force-pushed the add-missing-classes branch from 9d228be to 8e2405a Compare July 3, 2023 09:08

fix: change from border-white to border-inverted

43fbd0e

siljec requested review from Skadefryd and magnuh July 10, 2023 06:23

siljec marked this pull request as draft July 10, 2023 06:33

fix: add missing font-variant-numeric classes from tailwind

1bd6f91

siljec commented Jul 10, 2023

View reviewed changes

siljec marked this pull request as ready for review July 10, 2023 06:39

Skadefryd approved these changes Jul 10, 2023

View reviewed changes

siljec merged commit 4ce6033 into alpha Jul 10, 2023

siljec deleted the add-missing-classes branch July 10, 2023 11:10

github-actions bot pushed a commit that referenced this pull request Jul 10, 2023

chore(release): 1.0.0-alpha.58 [skip ci]

7478017

# [1.0.0-alpha.58](v1.0.0-alpha.57...v1.0.0-alpha.58) (2023-07-10) ### Bug Fixes * add missing classes Fabric supported ([#135](#135)) ([4ce6033](4ce6033))

siljec mentioned this pull request Jul 14, 2023

Update css docs warp-ds/css-docs#68

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: add missing classes Fabric supported #135

fix: add missing classes Fabric supported #135

siljec commented Jun 29, 2023 •

edited

Loading

siljec Jun 29, 2023 •

edited

Loading

AnnaRybkina Jun 30, 2023 •

edited

Loading

siljec Jun 30, 2023

siljec Jun 30, 2023 •

edited

Loading

siljec Jun 30, 2023

AnnaRybkina Jul 3, 2023

magnuh Jul 3, 2023

AnnaRybkina Jul 3, 2023 •

edited

Loading

siljec Jul 3, 2023

magnuh Jul 3, 2023

magnuh Jul 3, 2023

siljec Jul 10, 2023

siljec Jul 10, 2023

Skadefryd Jul 10, 2023

siljec Jul 10, 2023 •

edited

Loading

fix: add missing classes Fabric supported #135

fix: add missing classes Fabric supported #135

Conversation

siljec commented Jun 29, 2023 • edited Loading

siljec Jun 29, 2023 • edited Loading

Choose a reason for hiding this comment

AnnaRybkina Jun 30, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

siljec Jun 30, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

AnnaRybkina Jul 3, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

siljec Jul 10, 2023 • edited Loading

Choose a reason for hiding this comment

siljec commented Jun 29, 2023 •

edited

Loading

siljec Jun 29, 2023 •

edited

Loading

AnnaRybkina Jun 30, 2023 •

edited

Loading

siljec Jun 30, 2023 •

edited

Loading

AnnaRybkina Jul 3, 2023 •

edited

Loading

siljec Jul 10, 2023 •

edited

Loading